带填充的嵌套Bootstrap布局

Question

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

下面是一个例子.如果我用#main-container一个Bootstrap div 包装.span12,它就可以了.但这意味着#main-content现在比.span12宽度薄40px ,这意味着我不能在其中使用Boostrap网格.(例如,制作#left-columna .span9和#right-columna 很好.span3,但我不能.)

有没有更好的方法来创建此布局？

Answer 1

我认为这实际上取决于你想用padding实现什么.

例如,如果你想在填充提供的空间中有背景,你肯定需要一个实际的填充.但另一方面,如果你只想要一些间距,你应该能够坚持原始网格(给.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; }