2

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

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

  • 每 12 列 1 行 ?
  • 或者，一行任意数量的列？

示例案例 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>
4

1 回答 1

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：记住盒子大小。

到 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>
于 2013-04-11T09:28:40.633 回答