我现在正在阅读 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
的含义。那我是不是漏掉了什么?
谢谢。
最佳答案
这个答案分为三部分,官方发布(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 列数,从哪里开始该列通常会在 vp 或更大的视口(viewport)上呈现 ->position: relative
。col-vp-pull-x
= 将列向左拉 x 列数,从哪里开始该列通常会在 vp 或更大的视口(viewport)上呈现 ->position: relative
。vp = xs、sm、md 或 lg
x = 1 到 12
我认为让大多数人感到困惑的是,您需要更改 HTML 标记中列的顺序(在下面的示例中,B 在 A 之前),而且它只会插入或拉动大于或等于指定的视口(viewport)。即 col-sm-push-5
只会在 sm
视口(viewport)或更大视口(viewport)上推送 5 列。这是因为 Bootstrap 是一个“移动优先”的框架,所以您的 HTML 应该反射(reflect)您网站的移动版本。然后在较大的屏幕上完成推和拉。
- (桌面)较大的视口(viewport)被推拉。
- (移动设备)较小的视口(viewport)以正常顺序呈现。
<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>
视口(viewport) >= sm
|A|B|C|
视口(viewport)
|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>
关于css - 在 Twitter Bootstrap 3 中使用 col-lg-push 和 col-lg-pull 进行列顺序操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18057270/