如何在Bootstrap 3中使用语义标记创建多行？ [英] How can I create multiple rows using semantic markup in Bootstrap 3?

问题描述

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

I have eight "simple" panels that I want to layout using Bootstrap 3. The markup is

<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列

I'd like two two rows of four in md column size and four rows of two in sm column size.

我使用以下LESS规则：

I'm using this following LESS rules:

.dashboard {
    .make-row();
}

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

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

However, this creates problems in that the panels don't always form two rows of four. It depends on how much content is in the respective panels. If one of the panels is relatively short, a third row gets created with other panels until the short panels.

我想，当我填满所有12个插槽与前四个面板，接下来的四个将移动到第二行。

I thought that, as I'm filling up all 12 slots with the first four panels, the next four would move cleanly to the second row.

我做错了什么？

推荐答案

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

The problem you describe is documented here: http://getbootstrap.com/css/#grid-responsive-resets

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

The grid-responsive-resets add additional div's to your html which will break your semantic markup.

我从来没有尝试过附加（例如：之后）grid-responsive-resets属性的条件。条件i表示md网格的每四个元素。理论我认为我应该可以，我们应该问@ScottS也许：）

I have never tried to append (for example with :after) the grid-responsive-resets properties conditional. With conditional i mean every fourth element for the md-grid. Theoretical i think i should be possible, we should ask @ScottS maybe :)

这样的东西（不会工作，例子）

Something like this (won't work, example)

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

替代方法是给所有面板相同的高度，这不工作如果你不知道动态内容的情况下的最大可能的高度。如果你不知道的最大高度，你可以使用javascript / jQuery来解决这个问题。 （请参阅： http://stackoverflow.com/a/19777087/1596547 ）

Alternative is to give all your panels the same height, which don't work if you don't know the max possible height in the case of dynamic content. If you don't know the max height you could fix this with javascript / jQuery. (see: http://stackoverflow.com/a/19777087/1596547)

这篇关于如何在Bootstrap 3中使用语义标记创建多行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！