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

Posted 2023-03-05

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

【英文标题】：Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3

【发布时间】：2013-08-06 02:34:45

【问题描述】：

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

谢谢。

【问题讨论】：

尝试 class="col-lg-5 col-sm-5 col-sm-push-5" 和第二次相同的 pull

一个简单明了的例子（它适用于 2 列布局，但您会立即明白这一点并能够根据需要添加其他列）可以在标题为部分的页面底部找到“推拉 - 更改列顺序”：w3schools.com/bootstrap/bootstrap_grid_examples.asp

【参考方案1】：

这个答案分为三部分，官方发布见下文（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 列，从列正常呈现的位置开始 -> 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>

视口 >= sm

|A|B|C|

视口

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

【讨论】：

谢谢。将我的可导入脚本更改为我从 github 存储库克隆的脚本，然后它按预期工作。正如你所说，最初的脚本不包括col-lg-push。非常感谢。

谢谢，大于我猜想它会小于。但我想移动优先的开发者，这是有道理的。

我认为第二个选项“

翻转列的顺序（移动优先），这就是诀窍！谢谢！

在 Bootstrap v4 中，它们现在被命名为 push/pull-vp-1-12，例如push-md-4

【参考方案2】：

Pull 将 div “拉”向浏览器左侧，Push 将 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/

希望对你有帮助

【讨论】：

推拉不要“分配边距”。他们改变列的顺序。在您的示例中，Content 列通常会占用较大的第 1-4 列，而 Sidebar 列将占用第 5-8 列。这是基于它们在标记中的顺序。您可以通过在标记中更改它们来更改它们的顺序，但如果出于任何原因您不想这样做（例如，首先使代码对主要内容更具语义），那么您可以使用 push 和 pull 类来更改它们的顺序。跨度>

（续）在您的示例中，添加 col-lg-push-4 通过“推送”4 列将 Content 列从 1-4 列更改为 5-8 列。同样，col-lg-pull-4 将 Sidebar 列从 5-8 拉到 1-4。

col-$$-offset-XX 应用左边距值

【参考方案3】：

我只是觉得我会在这 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>

【参考方案4】：

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

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

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

【参考方案5】：

如果您需要根据视口大小以 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

解决方案

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

这是一个有效的 sn-p：

<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 生成非常有用。