163

我现在正在阅读 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意味着什么。所以我错过了什么吗？

谢谢。

4

5 回答 5

287

这个答案分为三部分，官方发布见下文（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 应该反映您网站的移动版本。然后在较大的屏幕上完成推拉。

  • （桌面）更大的视口被推拉。
  • （移动）较小的视口以正常顺序呈现。

演示

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

视口 >= 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)

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

于 2013-08-06T01:04:45.517 回答
36

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

希望能帮助到你

于 2013-08-11T08:18:39.460 回答
16

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

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

Brandon Schmalz - 全栈 Web 开发人员 在这里查看完整描述

于 2016-04-13T22:53:06.683 回答
15

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

[A][B][C]

至

[C]

[一个]

[乙]

Boostrap 的类.col-xx-push-X什么也不做，只是将一列推到右边，left: XX%; 所以你需要做的就是把一列推到右边，把左边的伪列的数量加起来。

在这种情况下：

  • 两列 (col-md-5和col-md-3) 向左移动，每一列都有向右的一列的值；

  • one( 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>

在此处输入图像描述

于 2014-11-05T16:21:25.453 回答
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


解决方案

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

这是一个工作片段：

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

该解决方案的另一个优点是，项目以其自然顺序（A、B、C、... H）出现在代码中，并且不必打乱，这对于 CMS 生成非常有用。

于 2016-07-20T15:49:07.607 回答