Bootstrap - 嵌套最佳实践 - 行和跨度

Question

使用嵌套的最佳方式是什么。

行内有多个跨度 - 动态内容：

• 每 12 列一行？
• 或者，一行任意列？

示例案例 n°1 - 哪一个是最好的？为什么？ ：

<div class="row">
    <span class="span6"></span>
    <span class="span6"></span>
    <span class="span6"></span>
    <span class="span6"></span>
</div>

或者

<div class="row">
    <div class="span6"></div>
    <div class="span6"></div>
</div>
<div class="row">
    <div class="span6"></div>
    <div class="span6"></div>
</div>

---

示例案例 n°2 - 用于组织内容的更多级别。

在这里，使用 div "my_margin" 在左右添加一些边距 - 您必须在其周围添加 "first_row"。

所以是： row-->span10,offset1-->row-->SPANS

<div id="first_row" class="row">
    <div id="my_margin" class="span10 offset1">
        <div class="row">
            <div class="span6"></div>
            <div class="span6"></div>
            <div class="span6"></div>
            <div class="span6"></div>
        </div>
    </div>
</div>

或者，

您不应该使用 span10,offset1 而是使用直接边距；

在这种情况下，您必须为每个 @Media_size 创建规则以使其具有响应性。

<div style="margin-right:XYpx; margin-left:XYpx" class="row">
    <div class="span6"></div>
    <div class="span6"></div>
    <div class="span6"></div>
    <div class="span6"></div>
</div>

或者 - Spans '应该' 用于您的主要内容，然后您只需使用 css。所以，类似的事情：

<div row>
    <div class="span6">
        http://jsfiddle.net/JkPhw/
    <div class="span6">
    <div class="span6">
        http://jsfiddle.net/JkPhw/
    <div class="span6">
</div>

Answer 1

对于案例 n°1：

这取决于，例如，如果您有一个包含九个预告片的列表，其中三个预告片填满一行，我会用一行来完成：

<ul class="row">
    <li class="span4"></li>
    <li class="span4"></li>
    <li class="span4"></li>
    <!-- six more -->
</ul>

如果您使用网格来布局表单，我会为每个标签输入对制作一行：

<!-- one label-input pair does not fill the whole content width -->
<form>
    <div class="row">
        <label class="span3"></label>
        <input class="span5" />
    </div>
    <div class="row">
        <label class="span3"></label>
        <input class="span5" />
    </div>
    <!-- and so on -->
</form>

我认为您不应该制作一个网格并将您的内容放在不同的网格单元格中进行布局，而是构建语义正确的标记并应用网格来布局内容（微小的差异）。

PS：记住box-sizing。

至 n°2：

我不太明白那里的想法，如果您使用的是网格，则不应对其应用左/右边距。网格取决于其水平边距才能正常工作...如果您必须更改它以使您的前端与设计相匹配，它可能不再在网格中。

更新：不过，如果您的内容较小，我肯定会使用您的第一个示例。但使用正确的网格跨度宽度：

<article class="row">
    <header class="span12"></header>
    <div class="span10 offset1">
        <div class="row">
            <div class="span5"></div>
            <div class="span5"></div>
        </div>
    </div>
</article>