我的网站顶部有一个 div block ,我想在其中显示 Logo 和一些信息,例如电话号码等。
在这里你可以看看:https://jsfiddle.net/7f8gc17o/
我希望文本(电话号码、电子邮件地址)垂直居中,所以我这样做了:
.headerinfo {
height: 250px;
display: flex;
align-items: center;
}
效果很好,但是当我现在调整窗口大小时,文本不会中断。它只会留在那里,并且 Logo 会变得非常非常小。当用户有一个小屏幕时,我想显示下面的信息。 Logo 位于顶部,后面是信息。
其次,我注意到:我有某种标题(我添加了类“skyblue”)- 当我调整窗口大小时,第二个文本行(“Hier finden Sie uns”)中断。但我希望标题并排显示,只要有足够的空间即可。
我该怎么做?帮助将不胜感激。
感谢阅读
最佳答案
尝试使用媒体查询。并在移动设备上将 flex-direction
更改为 column
。喜欢:
/* On Mobiles */
@media screen and (max-width: 767px) {
.headerinfo {
flex-direction: column;
}
}
看看下面的片段:
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
@color-purple: #292657;
.purple-container,.headline-container{
width: 100%;
height: auto;
padding: 0;
background-color: @color-purple;
div.icon-container{
padding-bottom: 80px;
padding-top: 60px;
h2{
margin-bottom: 60px;
}
.thumbnail{
background-color: transparent;
border: none;
border-radius: 0;
>img{
width: 100%;
height: auto;
}
>.caption{
color: @color-white;
text-align: center;
text-transform: uppercase;
margin-top: 30px;
}
}
.text-container{
width: 80%;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 60px;
margin-bottom: 40px;
>p{
>.bold{
font-weight: bold;
}
}
}
}
}
.font-bigger{
font-size:18px;
}
.skyblue{
color: #d2e5e9;
font-size: 20px;
}
/*this causes the main problem*/
.headerinfo {
height: 250px;
display: flex;
align-items: center;
}
/* On Mobiles */
@media screen and (max-width: 767px) {
.headerinfo {
flex-direction: column;
}
.logo-img {
margin: 20px 0 10px;
}
}
<div class="container purple-container text-center" style="margin:0 auto;">
<div class="container">
<div class="row headerinfo">
<div class="col-md-6">
<img class="logo-img" src="../img/Andreas_Heinke_Logo.png" alt="Some picture" style="width:auto;height:auto;max-width:100%;"/>
</div>
<div class="col-md-3 font-bigger">
<strong class="skyblue">Wir beraten Sie gern:</strong><br>
<span class="glyphicon glyphicon-earphone icon-margin"></span>01234 567 89 012<br>
<span class="glyphicon glyphicon-envelope icon-margin"></span>info@email.de
</div>
<div class="col-md-3 text-center font-bigger">
<strong class="skyblue">Hier finden Sie uns:</strong><br>
Streetname<br>
01234 City
</div>
</div>
</div>
</div>
希望这对您有所帮助!
关于html - CSS Bootstrap - 文本未正确中断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41224076/