Twitter bootstrap: cómo agregar márgenes laterales?

Tengo una página con un contenedor de Twitter Bootstrap centrado.Twitter bootstrap: cómo agregar márgenes laterales?

Este contenedor tiene un encabezado que abarca todo el ancho (span12) y debajo del encabezado hay una galería de imágenes, que es un grupo de filas con 4 celdas (que contienen imágenes) en cada fila.

Me gustaría agregar márgenes laterales a cada fila para que la primera y la última imagen no queden completamente ajustadas con los bordes del contenedor y las imágenes se espacien por igual. No quiero usar offset1 para el margen porque es demasiado grande.

Aquí hay un enlace a la maqueta actual: http://i46.tinypic.com/21e2h4o.jpg

Fuente

2012-06-22 alecswan

Se puede publicar una demo en jsfiddle.net con su margen de beneficio o una imagen maqueta? Me resulta difícil tratar de visualizar qué es lo que quieres. –

Incluí un enlace a la maqueta en mi publicación original. Gracias – alecswan

¿Has probado la clase fluida? fluido de fila de fluido de contenedor –

Puede utilizar la propiedad CSS nth-child

nth-child(4n+1) para el margen izquierdo

nth-child(4n+4) para el margen derecho

http://css-tricks.com/how-nth-child-works/

añadir un <div> en su .span12 con style="padding:0 19px"

y añadir dentro de un span12 <div class="row-fluid">

<div class="row"> 
    <div class="span12"> 
    <div style="padding:0 19px"> 
     <div class="row-fluid"> 
     <div class="span3">3</div> 
     <div class="span3">3</div> 
     <div class="span3">3</div> 
     <div class="span3">3</div> 
     </div> 
    </div> 
    </div> 
</div>

Fuente

2012-06-23 12:12:39 baptme

Debería haber mencionado que sé cómo usar los selectores de jQuery y CSS3 para establecer el margen. Pero este enfoque interfiere con la forma natural en que Twitter Bootstrap establece celdas en fila y tendré que ajustar los márgenes de acuerdo con el tamaño de los medios. Por lo tanto, estaba buscando una forma de hacerlo con las configuraciones de Twitter Bootstrap. – alecswan

es 940px de ancho. Ese debería ser el ancho de su espacio de trabajo o lo que sea. 960px parece ser una práctica bastante común entre los sistemas de grillas.

aquí está mi solución ...

<html> 
<head> 
    <title></title> 
    <link href="bootstrap.min.css" rel="stylesheet" type="text/css" /> 
    <style type="text/css"> 
     body { 
      background-color: #CCC; 
     } 

     #SiteBody 
     { 
      width: 960px; 
      margin: 0 auto; 
      background-color: white; 
     } 
    </style> 
</head> 
<body> 
    <div id="SiteBody"> 
     <div class="container"> 
      <div class="row"> 
       <div class="span12"> 
        <h1> 
         My Page</h1> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

Fuente

2012-06-23 22:24:58 Theo

Twitter bootstrap: cómo agregar márgenes laterales?

Respuesta

Cuestiones relacionadas