Diseño de Bootstrap anidado con relleno

Question

¿Cómo puedo crear un diseño de Bootstrap anidado con relleno en una de las secciones?

Una ilustración está debajo. Si envuelvo #main-container en un div Bootstrap con .span12, funciona. Pero eso significa que #main-content ahora es 40px más delgado que el ancho .span12, lo que significa que no puedo usar la grilla Boostrap dentro de él. (Por ejemplo, sería genial hacer una #left-column.span9 y #right-column un .span3, pero no puedo.)

¿Hay una mejor manera de crear este diseño?

Answer 1

Creo que realmente depende de lo que quiere lograr con el relleno.

Por ejemplo, si desea un fondo en el espacio proporcionado por el relleno, sin duda necesita un relleno real. Pero si, por el contrario, solo quiere un poco de espacio, debería poder mantener la cuadrícula original (dando márgenes a los niños .span en lugar de su contenedor).

Según su diseño, la solución fluida es obviamente más adaptable y más fácil de implementar.

se aprovecha de la red del fluido dentro del elemento de acolchado: 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> 

actualización añadido una frontera más explícito y fondo: Border demo (jsfiddle)

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