html - 具有两个不同跨度的流体行上的多个 div

Question

我试图在具有 span6 的 div 之间留出一个空间 -margin-left:或者margin-right:具有 20px 间距的边距，我认为右侧的剩余空间约为 20px。那里的任何人都可以让我的红色 div 有一个空间，以便布局看起来流畅吗？

我的布局将有 span12 和 span6 并且 span6 必须连续显示两个 div。

jsFiddle

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">1</div>
        <div class="span6">2</div>
        <div class="span6">3</div>
        <div class="span12">4</div>
        <div class="span6">1</div>
        <div class="span6">2</div>
        <div class="span12">3</div>              
    </div>
</div>    

这是我正在使用的 CSS：

.span12 {
    background-color:grey;
}
.span6 {
 background-color:red   
}
.row-fluid [class*="span"] {
margin-left:0px; margin-bottom:20px
}
.row-fluid .span6:nth-child(3n) {
   margin-left:20px
}

Answer 1

在引导程序中，一行最多只能包含 12 列，在您的情况下，您有这么多列

它不是列数，而是跨度总数，例如 12 + 6 + 6 等

你需要把它分成多行

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            1
        </div>
    </div>
    <div class="row-fluid">
        <div class="span6">
            2
        </div>
        <div class="span6">
            3
        </div>
    </div>
    <div class="row-fluid">
        <div class="span12">
            4
        </div>
    </div>
    <div class="row-fluid">
        <div class="span6">
            1
        </div>
        <div class="span6">
            2
        </div>
    </div>
    <div class="row-fluid">
        <div class="span12">
            3
        </div>              
    </div>
</div>

演示：小提琴- 您需要扩展结果面板的宽​​度，因为不包括响应式 css