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

网格响应重置会为你的html添加额外的div，这将破坏你的语义标记。

我从未尝试追加（例如使用:after）网格响应重置属性条件。条件i表示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）

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

1 个答案: