twitter-bootstrap-3 – 在Twitter Bootstrap 3中组织一个3列到2

发布时间：2020-12-17 20:42:53 所属栏目：安全来源：网络整理

导读：所以这完全有效(在小屏幕上从4列到2列)： 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 和我的3列一样,但是中间的列堆叠在第三

所以这完全有效(在小屏幕上从4列到2列)：

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

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

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

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

期望的结果：

1 - 3
2 - ..

切换2和3然后使用推拉的问题是第2列仍然是第3列的顶部.而且我需要它们就像我想要的结果’图表’.

编辑：我能做的是给第一列col-sm-12.这将推动其他2下来.这样顺序是好的,因为它是一个页脚,段落列完全底部的事实也不错.但我仍然愿意接受更好的建议.

网格现在看起来像这样：

1
2 - 3

解决方法

所以这里,

首先,你应该在大屏幕之前使用较小屏幕的设计,如下所示：

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

现在,为了您的设计,您需要这样：

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

…我做的是我用第3列颠倒了第2列,以便它们适合我对小屏幕的需求,然后通过使用推拉来调整大屏幕.

编辑：这是一个工作小提琴：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!