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

问题描述

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

<div class="dashboard-panel"><h1>面板1</h1><p>这是面板 1(和一段随机的文本)</p>
<div class="dashboard-panel"><h1>面板2</h1><p>这是面板 2(和一段随机的文本)</p>

//...等等 - 直到面板 8.

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

我正在使用以下 LESS 规则:

.dashboard {.make-row();}.仪表板面板{.make-sm-column(6);.make-md-column(3);}

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

我认为，当我用前四个面板填满所有 12 个插槽时，接下来的四个面板会干净地移动到第二行.

我做错了什么?以及如何在保留语义标记的同时进行这项工作?

解决方案

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

grid-responsive-resets 将额外的 div 添加到您的 html 中，这会破坏您的语义标记.

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

这样的事情(不起作用，例如)

.col-md-3:nth-child(4n+0):after{内容: ".";显示:块；高度:0；清楚:两者；可见性:隐藏；}

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

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>

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

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.

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.

What am I doing wrong? And how can I make this work while retaining the semantic markup?

解决方案

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

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

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;
}

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: https://stackoverflow.com/a/19777087/1596547)

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