带填充的嵌套自举布局

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; }