html - 带填充的嵌套引导布局

Question

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

下面是一个插图。如果我用 包装#main-container在 Bootstrap div 中.span12，它可以工作。但这意味着#main-content现在比.span12宽度薄 40 像素，这意味着我不能在其中使用 Boostrap 网格。（例如，制作#left-columna.span9和#right-columna会很棒.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>

更新添加了更明确的边框和背景：边框演示（jsfiddle）

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