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

时间：2013-08-05 11:41:03

标签： css twitter-bootstrap-3

我现在正在阅读Twitter Bootstrap 3上的文档，并尝试按照this page中所示的列排序，但是碰壁了。我不明白为什么这样的代码工作，也不知道如何正确指定设置。我要展示的是一个网格，它由长度为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的含义。我错过了什么吗？

感谢。

5 个答案:

答案 0 :(得分：277)

这个答案分为三部分，官方发布（v3和v4）见下文

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

无论如何，col-push- *和pull类确实存在，这将满足您的需求。 Here is a demo 

<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

另见This blog post on the subject

  • col-vp-push-x =通过 x 列向右推送列，从列通常呈现的位置开始 - > gt; position: relative，位于 vp 或更大的视口上。

  • col-vp-pull-x =通过 x 列向左拉列，从列通常呈现的位置开始 - ＆gt; 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>

查看端口＆gt; = sm 

|A|B|C|

查看端口＆lt; SM 

|B|
|A|
|C|

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

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

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

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

答案 1 :(得分：36)

将“拉”拉到浏览器左侧的div，然后将div“推”远离浏览器的左侧。

像： enter image description here

因此，基本上在任何网页的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/

希望有所帮助

答案 2 :(得分：15)

我觉得我会在这2个好答案中加上0.2美元。我有一个案例，当我不得不将最后一列一直移到顶部的3列情况。

<强> [A] [B] [C]

到

<强> [C]

<强> [A]

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

enter image description here

答案 3 :(得分：15)

<强>误解 列排序的常见误解是，我应该（或可能）对移动设备进行推送和拉动，并且桌面视图应该以标记的自然顺序呈现。这是错误的。

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

  

Brandon Schmalz - 全栈Web开发人员   Have a look at full description here

答案 4 :(得分：2)

如果您需要根据视口大小组织1/2/4列的数据，那么推拉可能根本没有选择。无论您如何首先订购商品，其中一种尺码可能会给您错误的订单。

在这种情况下，解决方案是使用嵌套的行和列，而不使用任何推送或拉取类。

实施例

在XS中你想要...... 

A
B
C
D
E
F
G
H

在SM中你想要...... 

A   E
B   F
C   G
D   H

在MD及以上你想要...... 

A   C   E   G
B   D   F   H


解

在周围的双列父元素中使用嵌套的双列子元素：

这是一个工作片段：

＆＃13;
＆＃13; 
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript" ></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-sm-6">
    <div class="row">
      <div class="col-md-6"><p>A</p><p>B</p></div>
      <div class="col-md-6"><p>C</p><p>D</p></div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="row">
      <div class="col-md-6"><p>E</p><p>F</p></div>
      <div class="col-md-6"><p>G</p><p>H</p></div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

这个解决方案的另一个好处是，这些项目按照自然顺序（A，B，C，...... H）显示在代码中，并且不必进行洗牌，这对于CMS生成很有用

相关问题
最新问题