Question

我希望所有引导列都像图像网格一样正确地堆叠起来。 Jsfiddle here

基本上，我希望Box 3位于Box 1之下，我也想要相同的列结构，即Box 1，然后是Box 2，然后是Box 3.而不是将Box 1和Box 3混合在一列中。

<div class="col-sm-6 col-xs-12">Box 1</div>
<div class="col-sm-6 col-xs-12">Box 2 .....</div>
<div class="col-sm-6 col-xs-12">Box 3</div>

而不是

<div class="col-sm-6 col-xs-12">
   <section>Box 1</section>
    <section>Box 3</section>
</div>
<div class="col-sm-6 col-xs-12">Box 2 .....</div>

为什么我这样做？

因为当屏幕有点宽时，在jsfiddle拉伸输出屏幕时，框3和框1之间有一个巨大的间隙，当屏幕很小时，box1首先出现，然后出现第2行，然后出现第3行。这是可取的。

1）我想在移动设备中按此顺序显示它们。

2）但是在网络中，由于方框2的高度，方框1和方框3之间存在巨大差距。我想要盒子1和盒子2堆叠。

如何实现1和2种情况。任何人都可以指出我正确的方向。谢谢。

Answer 1

在列中添加另一行，然后在该内部行中放置三个全宽列。

<div class="col-xs-6">
   <div class="row">
      <div class="col-xs-12">Col 1</div>
      <div class="col-xs-12">Col 2</div>
      <div class="col-xs-12">Col 3</div>
   </div>
</div>

使下一列堆叠到它上面的列引导程序

1 个答案: