Bootstrap 3嵌套網格不重置爲12

Question

我對Bootstrap 3有點新，所以請原諒我，如果這似乎很明顯。

我創建了一個的jsfiddle開始做事了與希望能幫助瞭解我試圖問：http://jsfiddle.net/dwdhj/2/

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-8"> 
      8 
      <div class="row"> 
       <div class="col-sm-4"> 
        4 - but want to appear as 6 
       </div> 
       <div class="col-sm-4"> 
        4 - but want to appear as 6 
       </div> 
      </div> 
     </div> 
     <div class="col-sm-4"> 
      4 - full height of screen 
      <br /><br /><br /><br /><br /><br /><br /><br /><br /> 
     </div> 
    </div> 
</div> 

當設計者使用網格 - 讓來自http://gridpak.com/說 - 他們將堅持貫穿整個設計。如果他們要創建一個右側面板作爲屏幕的整個高度，它可能會佔用4個網格。這給我們留下了8分 - 我知道的好數學。

我的問題：如果我在最初的8中創建一個新行 - 這樣我就可以使該容器中的所有內容變得更加流暢 - 它本質上是創建另一個12列的網格。這個新的12列網格實際上並不匹配設計師最初的網格。

我的問題：我可以這麼電網仍是最初的8列格我曾經在同一個 - 所以我只能使用最多8列的，或者是有別的東西，我應該在這裏做什麼？也許它是設計師需要做的事情？

我確實在Bootstrap 2上看到了一些關於行流體的例子，但是這已經被廢除 - 出於我讀過的很好的理由。

希望這已經足夠有道理 - 讓我知道是否需要澄清任何事情。

Answer 1

在做了一些更多的研究後，我發現使用推/拉的組合我能夠得到我以後的結果。

審查更新的jsfiddle鏈接http://jsfiddle.net/dwdhj/3/

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-12"> 
      Header 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-4 col-sm-push-8"> 
      4 - full height of screen 
      <br /><br /><br /><br /><br /><br /><br /><br /><br /> 
     </div> 
     <div class="col-sm-8 col-sm-pull-4"> 
      8 
     </div> 
     <div class="col-sm-4 col-sm-pull-4"> 
      4 
     </div> 
     <div class="col-sm-4 col-sm-pull-4"> 
      4 
     </div> 
     <div class="col-sm-4 col-sm-pull-4"> 
      4 
     </div> 
     <div class="col-sm-4 col-sm-pull-4"> 
      4 
     </div>  
     <div class="col-sm-3 col-sm-pull-4"> 
      3 
     </div> 
     <div class="col-sm-2 col-sm-pull-4"> 
      2 
     </div> 
     <div class="col-sm-3 col-sm-pull-4"> 
      3 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-12"> 
      Footer 
     </div> 
    </div> 
</div> 

本質上我的麻煩是創造新行的時候我需要什麼，當他們到達的「側邊欄」需要做的就是繼續增加他們彼此相鄰，然後將所有的時間我添加一個「推」來包裝它到下一個「行」將開始的地方。

很高興能有這樣做的更好的方式，但它現在的作品。

Answer 2

我回答了我的意見線程這回，我基本上採取了不同的方法

http://jsfiddle.net/Yjn9V/1/

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-12">Header</div> 
    </div> 
    <div class="row"> 
    <div class="col-sm-4 col-sm-push-8">4 full height 
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    </div> 

     <div class="col-sm-8 col-sm-pull-4"> 
      <div class="row"> 
       <div class="col-sm-12">12</div> 
      </div> 
      <div class="row"> 
       <div class="col-sm-6">6</div> 
       <div class="col-sm-6">6</div> 
      </div> 
      <div class="row"> 
       <div class="col-sm-6">6</div> 
       <div class="col-sm-6">6</div> 
      </div> 
      <div class="row"> 
       <div class="col-sm-5">5</div> 
       <div class="col-sm-2">2</div> 
       <div class="col-sm-5">3</div> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-12">footer</div> 
    </div> 
</div> 

我會嘗試這一點，因爲你做了太多的推/拉東西的地方你可以在包裝容器上做一次，因爲你有一個非常簡單的佈局。

檢查出來，讓我知道這裏或回到我的評論主題，如果這個工程或如果你有quesitons。

Answer 3

我和你有完全相同的問題。我想出了一個解決方案，它是用純CSS（編譯SCSS，也就是），硬編碼或JavaScript實現的 - 我把它們放在下面。

想法是這樣的：你有一個容器的百分比寬度的A股，並希望知道百分比的B，這是A的後代。如果我沒有弄錯，你可以通過簡單的計算來計算出容器B/A * 100的百分比。計算本身在CSS版本的評論中（鏈接到要點在下面）。

請注意，爲了這個工作，從A下降幷包含B的div不應該修改寬度（很像引導本身）。基於CSS（SCSS，是精確的）

解決方案，只接受格兩個層次： https://gist.github.com/royalsflush/8403942
在這裏，我只是通過父母與子女的可能性循環（兩級因此限制）。

JS解決方案使用我爲第一個解決方案進行的計算和樹遍歷來調整網格的所有嵌套組件。 演示：http://bootply.com/105852
和來源：https://gist.github.com/royalsflush/8422780
爲此，我使用與CSS解決方案相同的想法，除了我使用遞歸。讓我舉一個例子來說明：假設你再次有A和B，並且還有一個從C開始的C。如果你執行上述B的計算，你將得到B的容器和C B的條款，這與我們與A和B的情況完全相同。希望是明確的，不是我最好的解釋。

都有一個演示和大量的意見，但請讓我知道，如果你需要進一步澄清。 希望它有幫助！