使用col-lg-push和col-lg-pull在Twitter Bootstrap 3中的列顺序操作 [英] Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3
问题描述
我现在正在阅读Twitter Bootstrap 3上的文档,并尝试按此页面中所示的顺序排序,但点击墙壁。我不明白为什么这样的代码工作或如何正确指定设置。我想要显示的是一个网格,它包括长度5,另一个长度5,最后一个长度2网格。
所以我的是这样:
[5] [5] [2]
我想实现的是,当在桌面上查看时,会显示上面的布局,但是当在移动设备上查看时,我想先显示第二个长度为5的对象,然后第一个长度为5的对象,最后的长度为2的对象,垂直。像这样:
[5](第二)
[5]
虽然我试图按照上述文档中解释的步骤,第二个虽然是在移动平台,这是我说应该显示第二长度5对象在顶部。换句话说,我得到了:
[5](第一)
[5] $ b [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
表示。那么我缺少什么?
谢谢。
我甚至找不到col-lg-push-x或pull类在我下载的RC1的原始文件,所以检查你的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
=将列向右推 列数,从列通常渲染的位置开始 - >position:relative $> code>
-
col-vp-pull-x
=将列向左拉 x 列数,从列的通常会在 vp 或更大的视图端口上呈现 - >position:relative
。
vp = xs,sm,md或lg
strong> x = 1到12
是您需要更改HTML标记中的列的顺序(在下面的示例中,B在A之前),并且它只需要推或拉视口大于或等于指定的值。即 col-sm-push-5
只会推送 sm
视口或更大的5列。这是因为Bootstrap是一个移动优先框架,因此您的HTML应该反映您的网站的移动版本。
- (桌面)较大的视口被推入和拉出。
/jsfiddle.net/SchmalzyB/D2cJS/\"> 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
| A | B | C |
View-port < sm
| B |
| A |
| C |
I'm now reading documentation on Twitter Bootstrap 3, and tried to follow column ordering as shown in this page but 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.
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] (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] (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 pull
or push
means. So am I missing something?
Thanks.
This answer is in two parts, see below for the official release
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.
anyways, the col-push-* and pull classes did exist and this will suit your needs. 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>
EDIT: BELOW IS THE ANSWER FOR THE OFFICIAL RELEASE v3.0+
Also see This blog post on the subject
col-vp-push-x
= push the column to the right by x number of columns, starting from where the column would normally render ->position: relative
, on a vp or larger view-port.col-vp-pull-x
= pull the column to the left by x number of columns, starting from where the column would normally render ->position: relative
, on a vp or larger view-port.vp = xs, sm, md, or lg
x = 1 thru 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-5
will only push 5 columns on sm
view-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.
- (Desktop) Larger view-ports get pushed and pulled.
- (Mobile) Smaller view-ports render in normal order.
<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
|A|B|C|
View-port < sm
|B|
|A|
|C|
这篇关于使用col-lg-push和col-lg-pull在Twitter Bootstrap 3中的列顺序操作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!