Question

我的网站上有一个包含六个内容块的页脚。根据断点，我希望它们采用1x6,2x3或3x2格式。

没有推拉类，块栅格在所有断点上运行良好。但是如果它从3x2翻转到2x3格式，你可以成像我想重新排序一些块。

<!-- footer -->
<div class="footer">
<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4">                
        </div>
        <div class="col-sm-6 col-md-4">
        </div>
        <div class="col-sm-6 col-sm-push-6 col-md-4">
        </div>

        <div class="clearfix hidden-sm"></div>

        <div class="col-sm-6 col-sm-pull-6 col-md-4">
        </div>
        <div class="col-sm-6 col-md-4">
        </div>
        <div class="col-sm-6 col-md-4">
        </div>
    </div>
 </div>
 </div>

在SM模式下，重新排序工作正常。但是在LG模式下，它仍然执行col-sm-push-6命令，因为它将第3个div推出屏幕。

col-sm-push-6不仅仅是SM吗？

Answer 1

您必须使用col-md-push-0 / col-md-pull-0来“重置”其他网格尺寸的推/拉..

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4">  
            <div class="well"> </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="well"> </div>
        </div>
        <div class="col-sm-6 col-sm-push-6 col-md-4 col-md-push-0">
            <div class="well"> </div>
        </div>

        <div class="clearfix hidden-sm"></div>

        <div class="col-sm-6 col-sm-pull-6 col-md-4  col-md-pull-0">
            <div class="well"> </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="well"> </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="well"> </div>
        </div>
    </div>
 </div>

http://www.bootply.com/126837

为什么col-sm-push-6也在LG模式下执行？

1 个答案: