所以这完全有效(在小屏幕上从 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。这些将导致事情不会像您预期的那样一直向左包裹。
您可以使用 bootstrap 清除修复(甚至有条件地)解决此问题,例如:
<div class="clearfix visible-sm"></div>
把它放在你想要以 -sm 大小开始新行的 div 之后。根据需要重复。
关于twitter-bootstrap-3 - 在 Twitter Bootstrap 3 中组织 3 列到 2 列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18258774/