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

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|

这篇关于使用col-lg-push和col-lg-pull在Twitter Bootstrap 3中的列顺序操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！