如何在 Bootstrap 3 中使用语义标记创建多行？

Question

我有八个“简单”面板，我想使用 Bootstrap 3 进行布局。标记是

<div class="dashboard">
    <div class="dashboard-panel">
        <h1>Panel 1</h1>
        <p>This is panel 1 (and a random piece of text)</p>
    </div>

    <div class="dashboard-panel">
        <h1>Panel 2</h1>
        <p>This is panel 2 (and a random piece of text)</p>
    </div>

    // ...and so on - up to panel 8.
</div>

我想要 md 列大小的两行四行和 sm 列大小的四行二。

我正在使用以下 LESS 规则：

.dashboard {
    .make-row();
}

.dashboard-panel {
    .make-sm-column(6);
    .make-md-column(3);
}

但是，这会产生问题，因为面板并不总是形成两排四排。这取决于各个面板中有多少内容。如果其中一个面板相对较短，则与其他面板一起创建第三行，直到较短的面板。

我想，当我用前四个面板填满所有 12 个插槽时，接下来的四个会干净利落地移到第二行。

我做错了什么？我怎样才能在保留语义标记的同时完成这项工作？

Answer 1

您描述的问题记录在这里：http://getbootstrap.com/css/#grid-responsive-resets

grid-responsive-resets 会在你的 html 中添加额外的 div，这会破坏你的语义标记。

我从未尝试附加（例如使用:after）grid-responsive-resets 有条件的属性。对于条件，我的意思是 md-grid 的每四个元素。理论上我认为我应该是可能的，我们应该问@ScottS 也许:)

类似这样的东西（行不通，示例）

.col-md-3:nth-child(4n+0):after
{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

另一种方法是为所有面板提供相同的高度，如果您不知道动态内容的最大可能高度，这将不起作用。如果您不知道最大高度，您可以使用 javascript / jQuery 解决此问题。 （见：https://stackoverflow.com/a/19777087/1596547）