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

Question

提问by Blaszard

I'm now reading documentation on Twitter Bootstrap 3, and tried to follow column ordering as shown in this pagebut hit the wall. I don't understand why such a code works nor how to correctly specify the setting. What I want to show is one grid, which is consisted of length 5, and the other length 5, and finally one length 2 grid.

我现在正在阅读 Twitter Bootstrap 3 上的文档，并尝试按照本页中所示的列顺序进行操作，但遇到了困难。我不明白为什么这样的代码有效，也不明白如何正确指定设置。我要展示的是一个网格，它由长度为 5 的网格和另一个长度为 5 的网格组成，最后是一个长度为 2 的网格。

So mine is something like this:

所以我的是这样的：

[5] [5] [2]

And what I want to achieve is, when it's viewed on Desktop the layout above is displayed, but when it's viewed on mobile, I want to show the second length 5 object first, then the first length 5 object, and finally the length 2 object, vertically. Like this:

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

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

While I tried to follow the step explained in the above documentation, I got the first length 5 object over the second one despite being on mobile platforms, which as I said should display second length 5 object on the top. In other words, I got this:

当我尝试按照上述文档中解释的步骤进行操作时，尽管在移动平台上，我还是将第一个长度为 5 的对象放在了第二个对象上，正如我所说，它应该在顶部显示第二个长度为 5 的对象。换句话说，我得到了这个：

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

So how can I correctly put the second one over the first? Or since I use the same length object, could the column ordering not work?

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

Here's my code for your information:

这是我的代码供您参考：

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

Also, the documentation doesn't clarify what pullor pushmeans. So am I missing something?

此外，文档没有说明什么pull或push意味着什么。所以我错过了什么吗？

Thanks.

谢谢。

Answer 1

回答by Schmalzy

This answer is in three parts, see below for the official release (v3 and v4)

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

I couldn't even find the col-lg-push-x or pull classes in the original files for RC1 i downloaded, so check your bootstrap.css file. hopefully this is something they will sort out in RC2.

我什至无法在我下载的 RC1 的原始文件中找到 col-lg-push-x 或 pull 类，因此请检查您的 bootstrap.css 文件。希望这是他们将在 RC2 中解决的问题。

anyways, the col-push-* and pull classes did exist and this will suit your needs. Here is a demo

无论如何， 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>

EDIT: BELOW IS THE ANSWER FOR THE OFFICIAL RELEASE v3.0

编辑：以下是官方版本 v3.0 的答案

Also see This blog post on the subject

另请参阅有关该主题的这篇博客文章

col-vp-push-x= push the column to the right by xnumber of columns, starting from where the column would normally render -> position: relative, on a vpor larger view-port.
col-vp-pull-x= pull the column to the left by xnumber of columns, starting from where the column would normally render -> position: relative, on a vpor larger view-port.
vp= xs, sm, md, or lg
x= 1 thru 12

col-vp-push-x= 将列向右推x列，从列通常呈现的位置开始 ->position: relative在vp或更大的视口上。
col-vp-pull-x= 将列向左拉x列，从列通常呈现的位置开始 ->position: relative在vp或更大的视口上。
vp= xs、sm、md 或 lg
x= 1 到 12

I think what messes most people up, is that you need to change the order of the columns in your HTML markup (in the example below, B comes before A), and that it only does the pushing or pulling on view-ports that are greater than or equal to what was specified. i.e. col-sm-push-5will only push 5 columns on smview-ports or greater. This is because Bootstrap is a "mobile first" framework, so your HTML should reflect the mobile version of your site. The Pushing and Pulling are then done on the larger screens.

我认为让大多数人感到困惑的是，您需要更改 HTML 标记中列的顺序（在下面的示例中，B 在 A 之前），并且它只对视口进行推或拉大于或等于指定的值。即col-sm-push-5只会在sm视口或更大的位置上推送 5 列。这是因为 Bootstrap 是一个“移动优先”框架，所以您的 HTML 应该反映您网站的移动版本。然后在更大的屏幕上完成推和拉。

(Desktop) Larger view-ports get pushed and pulled.
(Mobile) Smaller view-ports render in normal order.

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

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

视口 >= sm

|A|B|C|

View-port < sm

视口 < sm

|B|
|A|
|C|

EDIT: BELOW IS THE ANSWER FOR v4.0

编辑：下面是 v4.0 的答案

With v4 comes flexbox and other changes to the grid system and the push\pull classes have been removed in favor of using flexbox ordering.

v4 带来了 flexbox 和对网格系统的其他更改，并且删除了推/拉类以支持使用 flexbox 排序。

Use .order-*classes to control visual order (where * = 1 thru 12)
This can also be grid tier specific .order-md-*
Also .order-first(-1) and .order-last(13) avalable

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

Answer 2

回答by DrGeneral

Pull "pulls" the div towards the left of the browser and and Push "pushes" the div away from left of browser.

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

Like: enter image description here

喜欢：在此处输入图片说明

So basically in a 3 column layout of any web page the "Main Body" appears at the "Center" and in "Mobile" view the "Main Body" appears at the "Top" of the page. This is mostly desired by everyone with 3 column layout.

所以基本上在任何网页的 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>

You can view it here: http://jsfiddle.net/DrGeneral/BxaNN/1/

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

Hope it helps

希望能帮助到你

Answer 3

回答by Syed Ali

MisconceptionCommon misconception with column ordering is that, I should (or could) do the pushing and pulling on mobile devices, and that the desktop views should render in the natural order of the markup. This is wrong.

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

RealityBootstrap is a mobile first framework. This means that the order of the columns in your HTML markup should represent the order in which you want them displayed on mobile devices. This mean that the pushing and pulling is done on the larger desktop views.not on mobile devices view..

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

Brandon Schmalz - Full Stack Web Developer Have a look at full description here

Brandon Schmalz - 全栈 Web 开发人员在此处查看完整说明

Answer 4

回答by Kuba

I just felt like I'll add my $0.2 to those 2 good answers. I had a case when I had to move the last column all the way to the top in a 3-column situation.

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

[A][B][C]

to

到

[C]

[A]

[一种]

[B]

[乙]

Boostrap's class .col-xx-push-Xdoes nothing else but pushes a column to the right with left: XX%;so all you have to do to push a column right is to add the number of pseudo columns going left.

Boostrap 的类.col-xx-push-X除了向右推一列之外什么都不left: XX%;做，所以你要做的就是向右推一列，就是添加向左走的伪列的数量。

In this case:

在这种情况下：

two columns (col-md-5and col-md-3) are going left, each with the value of the one that is going right;
one(col-md-4) is going right by the sum of the first two going left (5+3=8);

两列 (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>

enter image description here

在此处输入图片说明

Answer 5

回答by Jpsy

If you need to organize data in columns of 1 / 2 / 4 depending of the viewport size then push and pull may be no option at all. No matter how you order your items in the first place, one of the sizes may give you a wrong order.

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

A solution in this case is to use nested rows and cols without any push or pull classes.

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

Example

例子

In XS you want...

在 XS 中你想要...

A
B
C
D
E
F
G
H

In SM you want...

在SM你想要...

A   E
B   F
C   G
D   H

In MD and above you want...

在 MD 及以上你想要...

A   C   E   G
B   D   F   H

Solution

解决方案

Use nested two-column child elements in a surrounding two-column parent element:

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

Here is a working snippet:

这是一个工作片段：

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

Another beauty of this solution is, that the items appear in the code in their natural order (A, B, C, ... H) and don't have to be shuffled, which is nice for CMS generation.

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

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

提问by Blaszard

回答by Schmalzy

EDIT: BELOW IS THE ANSWER FOR THE OFFICIAL RELEASE v3.0

编辑：以下是官方版本 v3.0 的答案

EDIT: BELOW IS THE ANSWER FOR v4.0

编辑：下面是 v4.0 的答案

回答by DrGeneral

回答by Syed Ali

回答by Kuba

回答by Jpsy

Example

例子

Solution

解决方案

相关推荐

最近更新

标签

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

提问by Blaszard

回答by Schmalzy

EDIT: BELOW IS THE ANSWER FOR THE OFFICIAL RELEASE v3.0

编辑：以下是官方版本 v3.0 的答案

EDIT: BELOW IS THE ANSWER FOR v4.0

编辑：下面是 v4.0 的答案

回答by DrGeneral

回答by Syed Ali

回答by Kuba

回答by Jpsy

Example

例子

Solution

解决方案

相关推荐

CSS 如何在CSS中的DIV后删除换行符

CSS 删除最后一个边框底部？

CSS calc() 函数中的 Sass 变量

CSS 边框：与对象边缘的距离？

相关推荐

最近更新

标签