¿Se admite el relleno en el marco de Twitter Bootstrap?

Question

Tengo problemas para entender el marco Twittter Bootstrap. ¿Permite un relleno básico alrededor de los contenedores?

Parece que hay un margen predeterminado de 20 píxeles a la izquierda pero sin relleno. ¿Alguien aquí logró resolver este problema?

http://twitter.github.com/bootstrap/ 

Esto funciona bien si su fondo es blanco, pero el momento coloco un color detrás de un contenedor, No me sale el relleno y si añado el relleno, se me parte el diseño. ¿Estoy haciendo algo mal?

Answer 1

Inspirado por stackoverflow.com/a/10779289

.light { 
    -moz-box-sizing: border-box; 
    background: url(/img/background.png); 
    padding: 1em; 
} 

Answer 2

Puede overide la sitewidth en el archivo .less // sistema de cuadrícula y la estructura de la página

es decir, si desea agregar 20 píxeles a cada lado de la 940px (20 píxeles es el gridGutterWidth defecto) comente:

@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

y escribir:

@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1) + (@gridGutterWidth * 2));

cancelar el margen izquierdo: -20px con una regla de CSS:

.row {margin-left: 0;}

Pero si utiliza filas anidadas que tendrá que añadir una clase sólo para las filas que desea aplicar la sangría. Crear una regla:

.indent {margin-left: 0;}

Luego, en <div class="row"> añadir en una clase <div class="row indent">

Answer 3

Tomando el enfoque anterior y aplicarlo a acolchado también funcionaría.

Añadir una clase llamada .is-acolchados para el lapso que desea Padd (en este caso) span4

<!-- Example row of columns --> 
    <div class="row"> 
    <div class="span4 is-padded"> 
     <h2>Heading</h2> 
     <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> 
     <p><a class="btn" href="#">View details &raquo;</a></p> 
    </div> 
    </div> 

A continuación, crear CSS (o menos) que reduce la anchura del tramo por el aplicado acolchado, por ejemplo:

/* CSS example */ 
.span4.is-padded { 
    width: 280px; /* 300 - (10x2) */ 
    padding: 10px; 
    background: #CCC; /* just so you can see it */ 
} 

/* Less example */ 
.span4.is-padded { 
    width: (@gridColumnWidth * 4) + (@gridGutterWidth * 3) - @gridGutterWidth; 
    padding: @gridGutterWidth/2; 
    background: #CCC; /* just so you can see it */ 
} 

Esta facilidad se puede repetir para el resto de la red

.is-padded { 
    padding: @gridGutterWidth/2; 
    background: #CCC; /* just so you can see it */ 
} 
.span1.is-padded { 
    width: (@gridColumnWidth * 1) + (@gridGutterWidth * 0) - @gridGutterWidth; 
} 
.span2.is-padded { 
    width: (@gridColumnWidth * 2) + (@gridGutterWidth * 1) - @gridGutterWidth; 
} 
.span3.is-padded { 
    width: (@gridColumnWidth * 3) + (@gridGutterWidth * 2) - @gridGutterWidth; 
} 
.span4.is-padded { 
    width: (@gridColumnWidth * 4) + (@gridGutterWidth * 3) - @gridGutterWidth; 
} 
... etc 

Los puntos de quiebre en las cuadrículas receptivas también pueden anularse fácilmente utilizando consultas de medios.

Sin embargo, este enfoque no funcionará en las redes de fluido.