在兩個不同跨度的流體行上的多個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

回答

相關問題