css - Bootstrap 响应式地分隔行

Question

如何使 bootstrap 单独响应地添加一行。也许最好画出来 :D。

这就是我所拥有的:

这是我想要结束的:

我的 html 我喜欢这个，但我知道它不起作用，因为它将第一行和第二行分成两行(第一行 2 列，第二行 1 列，大小为 6)。那么如何完成这项工作，因为我今天才开始学习 bootstrap :)

我的html

<div class="row">
    <div class="col-md-4 col-xs6"></div>
    <div class="col-md-4 col-xs6"></div>
    <div class="col-md-4 col-xs6"></div>
</div>
<div class="row">
    <div class="col-md-4 col-xs6"></div>
    <div class="col-md-4 col-xs6"></div>
    <div class="col-md-4 col-xs6"></div>
</div>

Answer 1

将所有列都设为单个 .row 的子列是否适合您？

<div class="row">
    <div class="col-md-4 col-xs-6"></div>
    <div class="col-md-4 col-xs-6"></div>
    <div class="col-md-4 col-xs-6"></div>
    <div class="col-md-4 col-xs-6"></div>
    <div class="col-md-4 col-xs-6"></div>
    <div class="col-md-4 col-xs-6"></div>
</div>

我认为按照您的意愿创建新行并不容易/不切实际。
如果您希望这些行仅用于样式目的，您最好使用 css 并在布局更改时确定不同的样式