使用 col-md-push-* 将列推到下一行 [英] Pushing column to next line with col-md-push-*

查看：14
本文介绍了使用 col-md-push-* 将列推到下一行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有以下 6 个构建块:

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

所有块在一行中都有一个 col-sm-6 类.但是由于块 3 超过了引导程序 12 列的结构，它将跳到下一行.完美，这就是我想要的.

唯一的事情是，我想交换块 2 和 3.但它只适用于同一行的块.所以 1 和 2 可以交换，但 2 和 3 不能(在 SM 模式下)

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

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

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

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

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

它将创建:

<代码> [1] [2][3] [4][5][6]

见http://www.bootply.com/127062

解决方案

你说得对，在 Bootstrap 3.x 中没有办法下推到下一行.

但是，如果您认为移动优先"，您将首先创建 sm 布局，然后相应地推/拉它以用于更大的屏幕..

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

http://www.bootply.com/127076


更新 Bootstrap 4.x

现在在 Bootstrap 4 Beta 可以使用 flexbox 排序类将列推"或拉"到下一个行":

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

I have the following 6 building blocks:

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

All blocks have a col-sm-6 class in one row. But since block 3 exceeds bootstraps 12 columns structuur it will jump to the next line. Perfect that's what I want.

The only thing is, I want to swap block 2 and 3. But it only works for blocks on the same line. So 1 and 2 can swap, but 2 and 3 not (in SM mode)

 <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>

It will create:

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

See http://www.bootply.com/127062

解决方案

You're right, there is no way to push down to the next line in Bootstrap 3.x.

But, if you think "mobile first", you would first create the sm layout, and then push/pull it accordingly for larger screens..

<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


Update Bootstrap 4.x

Now in Bootstrap 4 Beta it's possible to "push" or "pull" columns to the next "row" using the flexbox ordering classes:

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

这篇关于使用 col-md-push-* 将列推到下一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆