Question

我正在使用bootstrap开发一个网站3.在图像库的部分，我使用.row类和每行4列进行了网格布局，如下所示：

<div class="row">
    <div class="col-md-3 col-xs-2">
        <p>Your Content goes Here!</p>
    </div>
    <div class="col-md-3 col-xs-2">
       <p>Your Content goes Here!</p>
     </div>
     <div class="col-md-3 col-xs-2">
        <p>Your Content goes Here!</p>
     </div>
        <div class="col-md-3 col-xs-2">
            <p>Your Content goes Here!</p>
        </div>
     </div>
</div>

当我进行跨浏览器测试时，在较小的[较低]分辨率下，我得到一个列的布局。但我希望它以小[低]分辨率出现在两列中。

为了获得小[低]分辨率的双列布局，我发现的唯一解决方案是使用来自bootstrap的.visible类，如下所示：

<div class="row">
    <div class="col-md-3 col-xs-2">
            <p>Your Content goes Here!</p>
    </div>
    <div class="col-md-3 col-xs-2">
            <p>Your Content goes Here!</p>
         </div>
     </div>
     <div class="row">
         <div class="col-md-3 col-xs-2">
            <p>Your Content goes Here!</p>
         </div>
         <div class="col-md-3 col-xs-2">
            <p>Your Content goes Here!</p>
         </div>
      </div>
</div>

但是，它导致我的网站加载内容两次，并且对性能不利。

这里有人可以帮助我吗？

谢谢！

Answer 1

如果我理解您的问题，您应该使用.col-sm-6

 <div class="row">
   <div class=".col-sm-6 col-md-3 col-xs-2">
     <p>Your Content goes Here!</p>
   </div>
   <div class=".col-sm-6 col-md-3 col-xs-2">
     <p>Your Content goes Here!</p>
   </div>
   <div class=".col-sm-6 col-md-3 col-xs-2">
     <p>Your Content goes Here!</p>
   </div>
   <div class=".col-sm-6 col-md-3 col-xs-2">
     <p>Your Content goes Here!</p>
   </div>
 </div>

Answer 2

如果我理解正确，您希望在大分辨率上每行4列，在小分辨率上每行2列。要做到这一点，尝试类似：

<div class="container">
  <div class="row">
    <div class="col-md-3 col-xs-6">
      <p>Your Content goes Here!</p>
    </div>
    <div class="col-md-3 col-xs-6">
      <p>Your Content goes Here!</p>
    </div>
    <div class="col-md-3 col-xs-6">
      <p>Your Content goes Here!</p>
    </div>
    <div class="col-md-3 col-xs-6">
      <p>Your Content goes Here!</p>
    </div>
  </div>       
</div>

您需要做的就是将col-xs-2更改为col-xs-6。

请参阅http://jsfiddle.net/hJyY4/

Answer 3

将col-xs-2替换为col-xs-6，它应该有效col-xs-6将为其提供50％的宽度，因此连续2列。

<div class="row">
    <div class="col-lg-3 col-xs-6">
        <!-- Content goes here -->
    </div>
    <div class="col-lg-3 col-xs-6">
        <!-- Content goes here -->
    </div>
    <div class="col-lg-3 col-xs-6">
        <!-- Content goes here -->
    </div>
    <div class="col-lg-3 col-xs-6">
        <!-- Content goes here -->
    </div>
</div>

Bootstrap响应网格获取一列

3 个答案: