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

因此，它是：行 - > span10，误差1 - >列 - > 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> 

或者 - 跨度是“应该”是使用你的主要内容，然后你只用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：

这取决于，如果您有例如九个玩笑其中3个玩笑填充线名单，我会做它有一个行：

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