Question

在我网站的页脚中，我有6个街区。在小屏幕上，我希望它们堆叠为2x3

 <div class="row">
        <div class="col-sm-6 col-md-4">
            <div class="aboutme">
                <div class="headline"><h2><i class="fa fa-angle-double-right"></i>About me</h2></div>
                <div class="box">
                    <img class="portrait" src="assets/img/portrait.jpg" />
                    testje
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="headline"><h2><i class="fa fa-angle-double-right"></i>Recent blog posts</h2></div>
            <div class="box">

            </div>  
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="headline"><h2><i class="fa fa-angle-double-right"></i>Recent projects</h2></div>
            <div class="box"></div>  
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 col-md-4">
            <div class="headline"><h2><i class="fa fa-angle-double-right"></i>Books</h2></div>
            <div class="box"></div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="headline"><h2><i class="fa fa-angle-double-right"></i>Stay connected</h2></div>
            <div class="box"></div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="headline"><h2><i class="fa fa-angle-double-right"></i>Drop a line</h2></div>
            <div class="box"></div>
        </div>
    </div>
</div>

如果列数超过12，我是否需要开始新行或是否可以依赖堆叠过程？

此时它堆叠如下：

[][]
  []
[][]
  []

所以它需要一种浮动修复我认为

Answer 1

您不需要开始新行。如果你删除分隔行，你应该得到3列2，然后在较小的屏幕上2列3。最小屏幕上的单列。

http://www.bootply.com/121418

堆栈引导块从3x2到2x3格式

1 个答案: