在Twitter Bootstrap 3中使用col-lg-push和col-lg-pull进行列顺序操作

Question

我现在正在阅读Twitter Bootstrap 3上的文档,并试图按照本页所示的列排序, 但是碰壁了.我不明白为什么这样的代码工作,也不知道如何正确指定设置.我要展示的是一个网格,它由长度为5,另一个长度为5,最后是一个长度为2的网格.

所以我的是这样的:

[5] [5] [2]

而我想要实现的是,当它在桌面上查看时,显示上面的布局,但是当它在移动设备上查看时,我想首先显示第二个长度为5的对象,然后是第一个长度为5的对象,最后是长度为2的对象, 垂直.像这样:

[5] (second)
[5] (first)
[2]  

当我尝试按照上面文档中解释的步骤进行操作时,尽管是在移动平台上,但我在第二个上获得了第一个长度为5的对象,正如我所说的那样,它应该在顶部显示第二个长度为5的对象.换句话说,我得到了这个:

[5] (first)
[5] (second)
[2] 

那么我怎样才能正确地将第二个放在第一个？或者因为我使用相同长度的对象,列排序不起作用？

这是我的代码供您参考:

<div class='row'>
<div class='col-lg-5 col-lg-push-5'></div>
<div class='col-lg-5 col-lg-pull-5'></div>
<div class='col-lg-2'></div>
</div>

此外,文档没有说明什么pull或push意味着什么.我错过了什么吗？

谢谢.

Answer 1

这个答案分为三部分,官方发布见下文(v3和v4)

我甚至找不到我下载的RC1的原始文件中的col-lg-push-x或pull类,所以请检查你的bootstrap.css文件.希望这是他们将在RC2中解决的问题.

无论如何,col-push-*和pull类确实存在,这将满足您的需求.这是一个演示

<div class="row">
    <div class="col-sm-5 col-push-5">
        Content B
    </div>
    <div class="col-sm-5 col-pull-5">
        Content A
    </div>
    <div class="col-sm-2">
        Content C
    </div>
</div>

编辑:以下是官方发布v3.0的答案

另请参阅此博客文章

• col-vp-push-x=将列向右推x列,从列通常渲染的位置开始 - > position: relative,在vp或更大的视口上.

• col-vp-pull-x=将列向左拉x列,从列通常渲染的位置开始 - > position: relative,在vp或更大的视口上.

  vp = xs,sm,md或lg

  x = 1到12

我认为大多数人都感到困惑的是,您需要更改HTML标记中列的顺序(在下面的示例中,B出现在A之前),并且它只是推送或拉动视图端口大于或等于指定的.即col-sm-push-5只会在sm视口或更大的列上推送5列.这是因为Bootstrap是一个"移动优先"框架,因此您的HTML应该反映您网站的移动版本.然后在较大的屏幕上完成推动和拉动.

• (桌面)更大的视口被推拉.
• (移动)较小的视口以正常顺序呈现.

DEMO

<div class="row">
    <div class="col-sm-5 col-sm-push-5">
        Content B
    </div>
    <div class="col-sm-5 col-sm-pull-5">
        Content A
    </div>
    <div class="col-sm-2">
        Content C
    </div>
</div>

View-port> = sm

|A|B|C|

视口<sm

|B|
|A|
|C|

编辑:以下是对v4.0的回答

随着v4的出现,flexbox和网格系统的其他更改以及push\pull类已被删除,转而使用flexbox排序.

• 使用.order-*类来控制视觉顺序(其中*= 1到12)
• 这也可以是特定于网格层的 .order-md-*
• 也.order-first(-1)和.order-last(13)avalable

<div class="row">
  <div class="col order-2">1st yet 2nd</div>
  <div class="col order-1">2nd yet 1st</div>
</div>

Answer 2

拉动"拉"到浏览器左侧的div,并按下"推"div从浏览器的左侧.

喜欢:

因此,基本上在任何网页的3列布局中,"主体"出现在"中心"和"移动"视图中,"主体"出现在页面的"顶部".每个人都有3列布局,这是最需要的.

<div class="container">
    <div class="row">
        <div id="content" class="col-lg-4 col-lg-push-4 col-sm-12">
        <h2>This is Content</h2>
        <p>orem Ipsum ...</p>
        </div>

        <div id="sidebar-left" class="col-lg-4  col-sm-6 col-lg-pull-4">
        <h2>This is Left Sidebar</h2>
        <p>orem Ipsum...</p>
        </div>


        <div id="sidebar-right" class="col-lg-4 col-sm-6">
        <h2>This is Right Sidebar</h2>
        <p>orem Ipsum.... </p>
        </div>
    </div>
</div>

你可以在这里查看:http://jsfiddle.net/DrGeneral/BxaNN/1/

希望能帮助到你

Answer 3

我只是觉得我会将0.2美元加到这两个好的答案上.我有一个案例,当我不得不将最后一列一直移到顶部的3列情况.

[A] [B] [C]

至

[C]

[一个]

[B]

Boostrap的类只做.col-xx-push-X其他事情,但是向右推一列,left: XX%; 所以你要做的就是向右推一列是添加左边的伪列数.

在这种情况下:

• 两列(col-md-5和col-md-3)向左走,每列都有正确的值;

• 一个(col-md-4)向左前两个的总和(5 + 3 = 8);

<div class="row">
    <div class="col-md-4 col-md-push-8 ">
        C
    </div>
    <div class="col-md-5 col-md-pull-4">
        A
    </div>
    <div class="col-md-3 col-md-pull-4">
        B
    </div>
</div>

Answer 4

误解 与列排序的常见误解是,我应该(或可能)对移动设备进行推送和拉动,并且桌面视图应该以标记的自然顺序呈现.这是错的.

Reality Bootstrap是一个移动的第一个框架.这意味着HTML标记中列的顺序应表示您希望它们在移动设备上显示的顺序.这意味着推送和拉动是在较大的桌面视图上完成的.不在移动设备上查看..

Brandon Schmalz - Full Stack Web Developer 在这里查看完整描述