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

twitter-bootstrap grid

Question

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

Parece que hay un margen predeterminado de 20px 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 en el momento en que coloco un color detrás de un contenedor, no tengo relleno y si agrego el relleno, mi diseño se rompe. ¿Estoy haciendo algo mal?

Answer 1

Inspirado en stackoverflow.com/a/10779289

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

Answer 2

Puede sobrescribir el ancho del sitio en el archivo .less // Sistema de cuadrícula y estructura de la página

es decir, si desea agregar 20px a cada lado del comentario de 940px (20px es el gridGutterWidth predeterminado):

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

y escribe:

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

cancele el margen izquierdo: -20px con una regla css:

.row {margin-left: 0;}

Pero si usa filas anidadas, tendrá que agregar una clase solo a las filas que desea sangrar. Crear una regla:

.indent {margin-left: 0;}

Luego, en <div class="row"> agregue en una clase <div class="row indent">

Answer 3

Tomar el enfoque anterior y aplicarlo al relleno también funcionaría.

Agregue una clase llamada .is-padded al intervalo que desea rellenar (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>

Luego, cree CSS (o menos) que reduzca el ancho del tramo mediante el relleno aplicado, 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 */
}

Esto se puede repetir fácilmente para el resto de la cuadrícula.

.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 ruptura en las cuadrículas de respuesta se pueden anular fácilmente también mediante consultas de medios.

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