Twitter Bootstrap：嵌套行？

Twiter Bootstrap問題：鑑於下面的圖像，我如何標記3個紅色容器，以便它們流暢且響應？我可以在span*內定義一個容器/行嗎？不知道如何解決這樣的佈局。Twitter Bootstrap：嵌套行？

enter image description here

來源

2012-11-19 StackOverflowNewbie

在[流體網格系統部]約*流體嵌套*的DOC會談（http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem） – Sherbrow

給予好評的整齊圖：○） – maasha

@ Sherbrow，因爲doc沒有給出與行復雜嵌套的例子，所以我在這裏結束了，對於這個用例來說並不完全清楚。 – Renee

你有沒有試過這種嵌套順序：

容器流體
排液
span9
排液
span3 span3 span3

來源

2012-11-19 22:20:06

當然，您可以將行嵌入其他跨度內，儘可能深。

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span9"> 
      <div class="span4"></div> 
      <div class="span4"></div> 
      <div class="span4"></div> 
     </div> 
     <div class="span3"></div> 
    </div> 
</div>

這應該適用於9行內的3個容器。

來源

2012-11-19 22:24:11

[docs]（http://twitter.github.com/bootstrap/scaffolding.html）建議將內部的'.span4'包裝在'.row-fluid'中。您是否有意忽略它，因爲它在實踐中是不必要的，還是僅僅是疏忽？ –

嗯，不應該是span3 ??? – alex

@alex流體網格的工作方式不同：每個嵌套級別的列最多應添加12列。這是因爲流體網格使用PERCENTAGES而不是像素來設置寬度。所以，上面的例子是完美的，因爲它的百分比可以在9以內。我認爲關於這個問題的引導文檔很差。 – Labanino

你可以在行內嵌套行，但是你必須確保標記是正確的。

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span9"> 
      <div class="row-fluid"> 
       <div class="span4">...</div> 
       <div class="span4">...</div> 
       <div class="span4">...</div> 
      </div> 
     </div> 
     <div class="span3">...</div> 
    </div> 
</div>

請點擊此處查看工作示例。嘗試在HTML和Result視圖之間移動垂直條，並且您會看到響應式佈局在那裏和那裏工作。 Three Responsive columns with Twitter Bootstrap

來源

2013-01-14 12:38:28

Twitter Bootstrap：嵌套行？

回答

相關問題