Bootstrap Responsive Grid获取单列

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-6替换col-xs-2，它应该可以工作，因为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>