Question

桌面视图中的我的网页分为2x3布局，即两行，每行3个网格列（引导行和列），如下所示：

**image1   image2   image3
image4   image5   image6**

<div class="row">
   <div class="col-sm-4 col-md-4 col-lg-4">
      <img src="image1.png"/>
   </div>
   <div class="col-sm-4 col-md-4 col-lg-4">
      <img src="image2.png"/>
   </div>
   <div class="col-sm-4 col-md-4 col-lg-4">
      <img src="image3.png"/>
   </div>
</div>
<div class="row">
   <div class="col-sm-4 col-md-4 col-lg-4">
      <img src="image4.png"/>
   </div>
   <div class="col-sm-4 col-md-4 col-lg-4">
      <img src="image5.png"/>
   </div>
   <div class="col-sm-4 col-md-4 col-lg-4">
      <img src="image6.png"/>
   </div>
</div>

当我缩小到移动尺寸（col-xs）时，我希望页面2采用2x3布局，如下所示：

**image1   image2
image3   image4
image5   image6**

这可以使用bootstrap框架实现吗？

Answer 1

只需在列类中添加xs视口的声明，并将其设置为单行，如下所示。只要列（和列偏移，如果您正在使用它们）等于12，您就可以使用单行包装器来生成多行的列。我很高兴能帮到你。

<div class="row">
    <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
         <img src="image1.png"/>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
        <img src="image2.png"/>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
        <img src="image3.png"/>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
        <img src="image4.png"/>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
        <img src="image5.png"/>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
        <img src="image6.png"/>
    </div>
</div>

实施例： http://www.bootply.com/8JlDo3kXKH

使用bootstrap从3x2（桌面）到2x3（移动）布局

1 个答案: