Bootstrap响应式布局在小屏幕上突破

对于普通和高分辨率屏幕，它可以很好地显示，但在小分辨率屏幕上它会中断。我尝试使用像col-xs-12这样的类，但它仍然没有正确显示。Bootstrap响应式布局在小屏幕上突破

<div class="container-fluid about-page-background"> 
    <div class="container" style="height: 289px; margin-top: 60px; padding-left: 60px; padding-right: 60px;"> 
    <div class="row"> 
     <div class="col-md-8 col-xs-12 about-staf"> 
     <span>Lorem ipsum dolor sit amet</span> 
     <span>consectetur adipisicing elit, sed</span> 
     <span>do eiusmod tempor incididunt ut</span> 
     <span>labore et dolore magna aliqua.</span> 
     </div> 
     <div class="col-md-4 col-xs-12 about-join"> 
     <span>Ut enim ad?</span> 
     <a href="#" class="btn btn-warning join-button">minim veniam, 
quis</a> 
     <span class="volunteer-info">nostrud exercitation ullamco laboris<a href="#"> laboris nisi ut aliquip</a></span> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-12 col-xs-12 about-text"> 
     <span> 
       ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
     </span> 
     <br /> 
     <br /> 
     <span>proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span> 
     </div> 
    </div> 
    </div> 
</div>

完整代码can be viewed on plunkr。

来源

2016-08-03 YoroDiallo

给定固定height: 600px给div。所以当改变宽度时，内容应该自动适应空间并且会下降。

如果您希望修正600px，那么您只能进行修复，做meadia query。使用媒体查询减少字体大小和填充。

例如：

CSS

@media screen and (max-width: 480px){ 
    .container{ 
    padding: 1em !important; 
    } 
    .col-md-8.col-xs-12.about-staf span{ 
    font-size: 27px; 
    } 
}

注：上述所有的类都是从只有你plunkr。

等button这减少宽度，字体大小，其它补白等

来源

2016-08-03 16:27:16

是，我删除固定的高度，但看起来细上正常的，大和xs查看。在小视图文本上相互叠加。但我做了设置col-xs-12，如果我对sm = 12也是这样，或者不是？ – YoroDiallo

col-xs-12说div应该在最小宽度（12格）的小型设备上。这工作正常。但无论如何，你的文字的字体非常大。它不能占用可用空间（即使提供了12个网格）。所以你必须使用媒体查询来减少字体大小和填充 –

啊哈，我明白了，thx – YoroDiallo

Bootstrap响应式布局在小屏幕上突破

回答

相关问题