帶填充的嵌套自舉佈局

Question

如何在其中一個部分創建帶填充的嵌套自舉佈局？

插圖如下。如果我將#main-container包裝在.span12的Bootstrap div中，它可以工作。但這意味着#main-content現在比寬度.span12薄40px，這意味着我不能在其內部使用Boostrap網格。 （舉例來說，這將會是巨大的，使#left-column一個.span9和#right-column一個.span3，但我做不到。）

有沒有更好的方式來創建此佈局？

Answer 1

我認爲這真的取決於你想要達到與填充的內容。例如，如果你想在由填充提供的空間中有一個背景，你肯定需要一個實際的填充。 但如果另一方面，你只是想要一些間距，你應該能夠堅持原來的網格（給.span孩子，而不是他們的容器邊際）。

根據您的佈局，流體解決方案顯然更具適應性，更易於實施。

利用流體網格填充的元素：Demo (jsfiddle)

<div class="container"> 
    <div class="row"> 
     <div class="span12" id="header">#header</div> 
    </div> 
    <div id="main-container"> 
     <div class="row-fluid"> 
      <div class="span12" id="main-content">#main-content</div> 
     </div> 
     <div class="row-fluid"> 
      <div class="span9" id="left-column">#left-column</div> 
      <div class="span3" id="right-column">#right-column</div> 
     </div> 
    </div> 
</div> 

更新增加了一個更明確的邊框和背景：Border demo (jsfiddle)

#main-container { 
    padding: 20px; 
    border: 3px solid red; 
    background: yellow; 
} 
#main-container > .row-fluid { background: white; }