桌面上的5列图像将在移动Bootstrap上变为4列

Question

我现在在网站上做，我需要帮助。我的网站有一个内容，其中包含5个用于桌面的列图像，当它在移动设备上时将变为4列。我是bootstrap，这是我的代码。谢谢。

<div class="mainBrands ">          
   <div class="brands">
     <p>BRANDS<p>
   </div>
   <hr>
   <div class="brandlogo">
       <div class="col-md-2 col-sm-3 col-xs-3">
          <img src="public/images/logo.png">
       </div>
       <div class="col-md-2 col-sm-3 col-xs-3">
          <img src="public/images/logo.png">
       </div>
       <div class="col-md-2 col-sm-3 col-xs-3">
          <img src="public/images/logo.png">
       </div>
       <div class="col-md-2 col-sm-3 col-xs-3">
          <img src="public/images/logo.png">
       </div>
       <div class="col-md-2 col-sm-3 col-xs-3">
          <img src="public/images/logo.png">
       </div>
    </div>
</div>

Answer 1

在桌面上你的屏幕会更大，所以应用了col-md-2，自举网格最多可以加12个，超过12个将在新行中。因此，在移动设备中，您只看到连续4个（4x3 = 12），第5个将换行到新行。 将它们全部设置为2将修复它。

请记住，一行将被分为12列。所以你想要5个项目，将1st设置为col-xs-2 col-xs-offset-1，将其他4设置为col-xs-2，这是11 col，所以另一个最后设置为占位符col-xs-1

  

网格系统

     

Bootstrap包含一个响应式移动第一流体网格系统，随着设备或视口大小的增加，可以适当地扩展到 12列。它包括用于简单布局选项的预定义类，以及用于生成更多语义布局的强大混合。

     

参考：http://getbootstrap.com/css/#grid

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="mainBrands ">
  <div class="brands">
    <p>BRANDS
      <p>
  </div>
  <hr>
  <div class="brandlogo">
    <div class="col-xs-2 col-xs-offset-1">
      <img src="public/images/logo.png">
    </div>
    <div class="col-xs-2">
      <img src="public/images/logo.png">
    </div>
    <div class="col-xs-2">
      <img src="public/images/logo.png">
    </div>
    <div class="col-xs-2">
      <img src="public/images/logo.png">
    </div>
    <div class="col-xs-2">
      <img src="public/images/logo.png">
    </div>
    <div class="col-xs-1">
    </div>
  </div>
</div>