Question

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

我的布局将包含span12和span6，而span6必须连续显示两个div。

<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

在bootstrap中，如果你有这么多列，一行最多只能包含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>

演示：Fiddle - 您需要扩展结果面板的宽度，因为不包含响应式css

流体行上有多个div，有两个不同的跨度

1 个答案: