twitter-bootstrap-3 – 使用col-md-push- *将列推送到下一行

发布时间：2020-12-18 00:25:26 所属栏目：安全来源：网络整理

导读：我有以下6个构建块： [1][2] [3][4][5][6] 所有块都在一行中有一个col-sm-6类. 但是由于块3超过了bootstraps 12列structuur,它将跳转到下一行. 完美就是我想要的. 唯一的问题是,我想交换第2和第3块. 但它只适用于同一行的块. 所以1和2可以互换,但2和3不可以(

我有以下6个构建块：

[1][2] 
[3][4]
[5][6]

所有块都在一行中有一个col-sm-6类.
但是由于块3超过了bootstraps 12列structuur,它将跳转到下一行.
完美就是我想要的.

唯一的问题是,我想交换第2和第3块.
但它只适用于同一行的块.
所以1和2可以互换,但2和3不可以(在SM模式下)

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

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

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

它将创建：

[1]   [2]
 [3]   [4]
    [5][6]

看到
http://www.bootply.com/127062

解决方法

你是对的,没有办法推到Bootstrap 3.x的下一行.

但是,如果你认为“移动优先”,你首先要创建sm布局,然后相应地推/拉它以获得更大的屏幕.

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

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

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

http://www.bootply.com/127076

更新Bootstrap 4.x.

现在使用flexbox订购类在Bootstrap 4 Beta it’s possible to “push” or “pull” columns to the next “row”中：

https://www.codeply.com/go/MELnKiqofA

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!