html - 如何将 div 框推到另一个下方？在 Bootstrap 中

Question

这看起来很容易，但我只想将 1b div 推到 1a div 下。如您所见，我的代码基于 Bootstrap 。有没有类似帮助类的东西来解决这个问题？

谢谢!

<div class="col-sm-3" style="background-color:lavenderblush;">Div 1a</div>
<div class="col-sm-3" style="background-color:lightcyan;">Div 1b</div>
<div class="col-sm-6" style="background-color:lavender; height:100px;">Div 2</div>
<div class="col-sm-3" style="background-color:lightgray;"> Div 3</div>

Answer 1

您可以为此创建一个容器并将 1a 和 1b 放入该容器中，如下所示:

<div class="col-sm-3 the-container">
    <div class="col-sm-12" style="background-color:lavenderblush;">Div 1a</div>
    <div class="col-sm-12" style="background-color:lightcyan;">Div 1b</div>
</div>
<div class="col-sm-6" style="background-color:lavender; height:100px;">Div 2</div>
<div class="col-sm-3" style="background-color:lightgray;"> Div 3</div>

然后对两者都使用 col-sm-12，将它们设置为 100% 宽度。

附言此外，您可能有一些填充，您可以通过向父级添加行类来清除它。