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

一尘不染

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

css

我现在正在阅读Twitter Bootstrap3上的文档，并试图按照此页面上所示的顺序进行排序，但遇到了麻烦。我不明白为什么这样的代码有效，也不知道如何正确指定设置。我要显示的是一个网格，它由长度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含义。那我想念什么吗？

谢谢。

阅读 334

2020-05-16

共1个答案

一尘不染

此答案分为三个部分，请参见下面的官方版本（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= 在 xp 或更大的视口上，从 x 列的正常渲染位置开始向右推 x 列数。position: relative __
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应该反映您网站的移动版本。然后在较大的屏幕上完成“推和拉”操作。

（桌面）较大的视口会被推拉。
（移动）较小的视口按正常顺序渲染。

Content B

Content A

Content C

View-port > = sm

|A|B|C|

View-port <sm

|B|
|A|
|C|

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

随着v4的发布，flexbox以及对网格系统的其他更改和push \ pull类已被删除，有利于使用flexbox排序。

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

1st yet 2nd

2nd yet 1st

2020-05-16