在 Twitter Bootstrap 3 中使用 col-lg-push 和 col-lg-pull 操作列顺序 [英] Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3

查看：19
本文介绍了在 Twitter Bootstrap 3 中使用 col-lg-push 和 col-lg-pull 操作列顺序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

所以我的是这样的:

[5] [5] [2]

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

[5](第二个)[5](第一次)[2]

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

[5](第一次)[5](第二个)[2]

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

这是我的代码供您参考:

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

此外，文档没有阐明 pull 或 push 的含义.所以我错过了什么吗?

谢谢.

解决方案

这个回答分三部分，下面正式发布(v3和v4)

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

无论如何， col-push-* 和 pull 类确实存在，这将满足您的需求.这是一个演示

<div class="col-sm-5 col-push-5">内容乙
<div class="col-sm-5 col-pull-5">内容A

<div class="col-sm-2">内容 C

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

另请参阅有关该主题的博文

  • col-vp-push-x = 将列向右推 x 列数，从哪里开始该列通常会在 vp 或更大的视口上呈现 -> position: relative.

  • col-vp-pull-x = 将列向左拉 x 列数，从哪里开始该列通常会在 vp 或更大的视口上呈现 -> position: relative.

    vp = xs、sm、md 或 lg

    x = 1 到 12

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

  • (桌面)更大的视口被推拉.
  • (移动)较小的视口以正常顺序呈现.

演示

<div class="col-sm-5 col-sm-push-5">内容乙
<div class="col-sm-5 col-sm-pull-5">内容A

<div class="col-sm-2">内容 C

视口 >= sm

<代码>|A|B|C|

视口

<代码>|B||A||C|

下面是 v4.0 的答案

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

<div class="col order-2">第一个还是第二个</div><div class="col order-1">第二个还是第一个</div>

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 three parts, see below for the official release (v3 and 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.

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

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.

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|

EDIT: BELOW IS THE ANSWER FOR v4.0

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

<div class="row">
  <div class="col order-2">1st yet 2nd</div>
  <div class="col order-1">2nd yet 1st</div>
</div>

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆