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

我想要在具有span6的div之间获得空间 - 要么margin-left:要么margin-right:具有20px的间距，剩余空间在右边我认为是20像素。任何人都可以让我的红色div有一个空间，使布局看起来流畅吗？在两个不同跨度的流体行上的多个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 
}

来源

2013-07-18 ONYX

自举行只能包含最多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

来源

2013-07-18 03:03:00

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

回答

相关问题