在 Twitter Bootstrap 3 中组织 3 列到 2 列 [英] Organising a 3-column to 2-column in Twitter Bootstrap 3

查看：18
本文介绍了在 Twitter Bootstrap 3 中组织 3 列到 2 列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

所以这完全有效(在小屏幕上从 4 列变为 2 列):

<div class="col-lg-3 col-sm-6">1
<div class="col-lg-3 col-sm-6">2

<div class="col-lg-3 col-sm-6">3

<div class="col-lg-3 col-sm-6">4

和我的 3 列一样，但是中间的列堆叠在第三列的顶部(那时是右/第二列).

<div class="col-lg-3 col-sm-6">2

<div class="col-lg-6 col-sm-6">3

如何让中间的列堆叠在第一列的上方或下方?例如 col-sm-pull-6 不起作用.

想要的结果:

1 - 32 - ..

切换 2 和 3 然后使用推拉的问题是第 2 列仍然位于第 3 列的顶部.我需要它们像我想要的结果图表"一样.

我能做的是给第一列 col-sm-12.这会将另外 2 个推下.这样的顺序是好的，而且由于它是用于页脚的，因此段落列位于完整的底部这一事实也不错.但我仍然愿意接受更好的建议.

网格现在看起来像这样:

12 - 3

解决方案

那么，

首先，您应该在大屏幕之前使用小屏幕的设计，如下所示:

(……)

现在要实现您的设计，您需要这样做:

1
<div class="col-sm-6 col-lg-3 col-lg-push-3">3
<div class="col-sm-6 col-lg-3 col-lg-pull-3">2

...我所做的是将第 2 列与第 3 列颠倒，以便它们满足我对较小屏幕的需求，然后通过使用推拉调整我以适应较大的屏幕.

这是一个工作小提琴:

http://jsfiddle.net/ujrwyrbr/2/

So this totally works (goes from 4 columns to 2 on small screens):

<div class="row">
    <div class="col-lg-3 col-sm-6"> 1</div>
    <div class="col-lg-3 col-sm-6"> 2</div>
    <div class="col-lg-3 col-sm-6"> 3</div>
    <div class="col-lg-3 col-sm-6"> 4</div>
</div>

As does my 3-column, however the middle column gets stacked on top of the third one (which by then is the right/2nd column).

<div class="row" id="footer">
    <div class="col-lg-3 col-sm-6">
        1
    </div>
    <div class="col-lg-3 col-sm-6">
        2
    </div>
    <div class="col-lg-6 col-sm-6">
        3
    </div>
</div>

How can I tell the middle column to stack above or underneath the first column? col-sm-pull-6 doesn't work for example.

Desired result:

1 - 3
2 - ..

The problem with switching 2 and 3 and then using push and pull, is that the 2nd column still goes a top of the 3rd column. And I need them to be like in my desired result 'diagram'.

Edit: What I can do is give the first column col-sm-12. This will push the other 2 down. That way the order is good, and since it's for a footer, the fact that the paragraph column is at the complete bottom, isn't bad either. But I'm still open for better suggestions.

The grid now looks like this:

1
2 - 3

解决方案

So here goes,

first of all you should use the designs for smaller screens BEFORE larger screens like so:

<div class="col-sm-6 col-lg-3"> (...)

Now for your design to happen you need to to this:

<div class="col-sm-6 col-lg-3">
1
</div>
<div class="col-sm-6 col-lg-3 col-lg-push-3">
3
</div>
<div class="col-sm-6 col-lg-3 col-lg-pull-3">
2
</div>

...what I did is that I reversed the 2nd with 3rd column so that they fit my needs for the smaller screen and then by using push and pull I adjusted for the larger screens.

edit: here is a working fiddle:

http://jsfiddle.net/ujrwyrbr/2/

这篇关于在 Twitter Bootstrap 3 中组织 3 列到 2 列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

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