Question

对于普通和高分辨率屏幕，它显示正常，但在小分辨率屏幕上它会断开。我尝试使用像col-xs-12这样的类，但它仍然没有正确显示。

<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。

Answer 1

你给div固定height: 600px。因此，在更改宽度时，内容应自动调整到空间并且会下降。

如果您希望将hieght固定为600px，则只能执行onething，执行 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的宽度，字体大小，其他填充等

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

1 个答案: