带填充的嵌套Bootstrap布局

Question

如何在其中一个部分中创建一个带填充的嵌套Bootstrap布局？

如下图所示。如果我用#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; }