css - 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 而是直接 margin ；

在这种情况下，您必须为每个 @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>