Question

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

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

每12列一行？
OR，任意列数一行？

样本案例n°1 - 哪一个是最好的＆amp;为什么？：

<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”在左边添加一些边距＆amp;对 - 你必须有“first_row”。

所以它是：行 - ＆gt; span10，offset1 - ＆gt;行 - ＆gt; 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：

这取决于，如果你有一个九个teasers的列表，其中三个teasers填充一行，我会用一行：

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

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

1 个答案: