Html 流体行上具有两个不同跨距的多个div

我试图在div之间获得一个空格，它有一个span6-

左边距：

或

右边距：

有一个20px的间距，右边剩余的空格我认为大约是20px。有没有人能给我的红色沙发留出一个空间，让它的布局看起来流畅

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

---

在引导过程中，一行最多只能包含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>

1.
2.
3.
4.
1.
2.
3.

演示：-您需要扩展结果面板的宽度，因为不包括响应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
}

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