Html CSS引导-文本未正确断开

我有一个div块在我的网站顶部，我想显示一个标志和一些信息，如电话号码等

您可以在这里查看：

我希望文本（电话号码、电子邮件地址）垂直居中，所以我这样做：

.headerinfo {
  height: 250px;
  display: flex;
  align-items: center;
}

这是伟大的工作，但当我现在调整窗口的大小，文字不会打破。它只会停留在那里，标志变得非常非常小。当用户有一个小屏幕时，我想显示以下信息。徽标位于顶部，然后是信息

其次，我注意到：我有一个标题（我添加了“skyblue”类）——当我调整窗口大小时，第二行文本（“Hier finden Sie uns”）会中断。但只要有足够的空间，我希望标题彼此相邻

我该怎么做？非常感谢您的帮助

---

感谢您阅读

尝试使用媒体查询。并将移动设备上的

弹性方向

更改为

列

。比如：

/* On Mobiles */
@media screen and (max-width: 767px) {
  .headerinfo {
    flex-direction: column;
  }
}

请看下面的代码片段：

@导入url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
@紫色：#292657；
.purple容器、.headline容器{
宽度：100%；
高度：自动；
填充：0；
背景色：@色紫色；
分区图标容器{
填充底部：80px；
填充顶部：60px；
氢{
边缘底部：60px；
}
.缩略图{
背景色：透明；
边界：无；
边界半径：0；
>img{
宽度：100%；
高度：自动；
}
>.标题{
颜色：@白色；
文本对齐：居中；
文本转换：大写；
边缘顶部：30px；
}
}
.文本容器{
宽度：80%；
高度：自动；
左边距：自动；
右边距：自动；
边缘顶部：60像素；
边缘底部：40px；
>p{
>.bold{
字体大小：粗体；
}
}
}
}
}
.字体更大{
字号：18px；
}
天蓝色{
颜色：#d2e5e9；
字体大小：20px；
}
/*这导致了主要问题*/
校长信息{
高度：250px；
显示器：flex；
对齐项目：居中；
}
/*在手机上*/
@媒体屏幕和屏幕（最大宽度：767px）{
校长信息{
弯曲方向：立柱；
}
.logo img{
利润率：20px 0 10px；
}
}

您的姓名：

0123456789012

info@email.de
他发现了你：

街道名称

01234城市

尝试使用媒体查询。并将移动设备上的

弹性方向

更改为

列

。比如：

/* On Mobiles */
@media screen and (max-width: 767px) {
  .headerinfo {
    flex-direction: column;
  }
}

请看下面的代码片段：

@导入url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
@紫色：#292657；
.purple容器、.headline容器{
宽度：100%；
高度：自动；
填充：0；
背景色：@色紫色；
分区图标容器{
填充底部：80px；
填充顶部：60px；
氢{
边缘底部：60px；
}
.缩略图{
背景色：透明；
边界：无；
边界半径：0；
>img{
宽度：100%；
高度：自动；
}
>.标题{
颜色：@白色；
文本对齐：居中；
文本转换：大写；
边缘顶部：30px；
}
}
.文本容器{
宽度：80%；
高度：自动；
左边距：自动；
右边距：自动；
边缘顶部：60像素；
边缘底部：40px；
>p{
>.bold{
字体大小：粗体；
}
}
}
}
}
.字体更大{
字号：18px；
}
天蓝色{
颜色：#d2e5e9；
字体大小：20px；
}
/*这导致了主要问题*/
校长信息{
高度：250px；
显示器：flex；
对齐项目：居中；
}
/*在手机上*/
@媒体屏幕和屏幕（最大宽度：767px）{
校长信息{
弯曲方向：立柱；
}
.logo img{
利润率：20px 0 10px；
}
}

您的姓名：

0123456789012

info@email.de
他发现了你：

街道名称

01234城市

要使图像居中，请将此样式应用于图像：

保证金：0自动

要使文本居中，请对其应用此样式：

---

文本对齐：居中要居中图像，请将此样式应用于图像：

保证金：0自动

要使文本居中，请对其应用此样式：

---

文本对齐：居中

不确定这是否是您想要的，但您是否尝试添加了

flex wrap:wrap

到

headerinfo

？不确定这是否是您想要的，但您是否尝试添加

柔性包装：包装至
标题信息
？非常好用，谢谢！但是，你是如何处理彼此相邻的标题的？因为当我调整窗口大小（在断点之前）时，它会这样做：@Insane这种情况发生在我发布的上面的代码中吗？不，不会，但是在我的小提琴中。这就是为什么我想知道你是否改变了你的生活code@Insane不，除了手机上的徽标图像
页边距上/下
外，我没有更改任何内容。就这样。您可以看到上面的代码片段。如果这对你有帮助的话，也别忘了接受这个答案。非常好用，谢谢！但是，你是如何处理彼此相邻的标题的？因为当我调整窗口大小（在断点之前）时，它会这样做：@Insane这种情况发生在我发布的上面的代码中吗？不，不会，但是在我的小提琴中。这就是为什么我想知道你是否改变了你的生活code@Insane不，除了手机上的徽标图像
页边距上/下
外，我没有更改任何内容。就这样。您可以看到上面的代码片段。如果这对你有帮助，也不要忘记接受这个答案。