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

Question

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

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的含义。那么我有遗漏什么吗？

谢谢。

- Blaszard

尝试使用class="col-lg-5 col-sm-5 col-sm-push-5"，第二个同样使用pull。 - Dawood Awan

一个简单明了的示例（针对两列布局，但您可以立即理解并根据需要添加其他列）可以在此处找到，位于页面底部标题为“Push And Pull - Change Column Ordering”的部分：https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp - Tyler Rafferty

5个回答

36

Pull将div向浏览器左侧移动，而Push将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/ 希望能帮到你。

- DrGeneral

3

推和拉不会“分配边距”，它们改变列的顺序。在您的示例中，“内容”列通常会在大尺寸下占用1-4列，而“侧边栏”列会占用5-8列。这是根据它们在标记中的顺序确定的。您可以通过更改标记中的顺序来改变它们的顺序，但如果出于任何原因您不想这样做（例如使代码更符合主要内容优先的语义），则可以使用推和拉类来更改它们的顺序。 - T Nguyen

1

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

1

col-$$-offset-XX 应用 margin-left 值。 - beauXjames

16

误解常见的对于列排序的误解是我应该（或可以）在移动设备上进行推拉操作，并且桌面视图应该按照标记的自然顺序呈现。这是错误的。 实际情况 Bootstrap 是一个移动优先的框架。这意味着 HTML 标记中列的顺序应该代表您希望它们在移动设备上显示的顺序。这意味着推拉应该在较大的桌面视图上完成，而不是在移动设备视图上完成。

Brandon Schmalz - 全栈网页开发者在此处查看完整说明

- Syed Ali

15

我觉得我会在那两个好回答的基础上再提供我的看法。我曾经遇到这样一个情况，需要将三列中的最后一列移动到最上面。

[A][B][C]

变成

[C]

[A]

[B]

Bootstrap的类.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>

在这里输入图片描述

- Kuba

2

如果你需要根据视口大小将数据组织成1/2/4列，则推送和拉动可能根本不是选项。无论你最初如何排列项目，其中一个尺寸可能会给你错误的顺序。

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

示例

在XS中，您想要...

A
B
C
D
E
F
G
H

In SM you want...

A   E
B   F
C   G
D   H

In MD and above you want...

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

- Jpsy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Schmalzy · Accepted Answer

这篇回答分为三部分，下面是官方发布的内容（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个列，从列通常呈现的位置开始 -> 在vp或更大的视口上使用position: relative。
col-vp-pull-x = 将列向左拉x个列，从列通常呈现的位置开始 -> 在vp或更大的视口上使用position: relative。

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和其他对网格系统的更改，并且推荐使用flexbox排序来替换push\pull类。

使用.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>