Twitter Bootstrap - Problema de posición con row-fluid

Question

Actualmente estoy construyendo un sitio web usando Twitter bootstrap (¡lo cual es increíble!). que tenía el diseño usando:

<div class="row"> 
    <div class="span6"></div> 
    <div class="span6"></div> 
    <div class="span6"></div> 
    <div class="span6"></div> 
</div> 

Qué funciona muy bien, tengo 2 divs básicamente por fila, y no tener que incluir un contador en nuestro bucle para deshacerse de los márgenes. ¡Fue perfecto! Pero decidimos cambiar de opinión acerca de tener un diseño fijo, así que cambié de .row a .row-fluid. Y aquí es cuando surge el problema.

sé tener algo como esto:

<div class="row-fluid"> 
    <div class="span6"></div> 
    <div class="span6"></div> 
    <div class="span6"></div> 
    <div class="span6"></div> 
</div> 

y el árbitro div con el trabajo .span6 bien para la primera fila, pero entonces el margen izquierda de la misma .span6 están apareciendo a partir de la segunda fila, por lo tanto, el diseño es, bueno, ... no es bueno.

I'm surprised it works amazing for fixed layout but not row fluid. ¿Hay una solución para esto? Usé esto en todo mi sitio, por lo que tener que agregar contadores para todos ellos ... sería demasiado trabajo.

Aquí es JS violín: http://jsfiddle.net/denislexic/uAs6k/3/

Cualquier ayuda apreciada, gracias.

Answer 1

Si conoce el número de de span para cada fila, puede usar una expresión como esta:

.row-fluid [class*="span"]:nth-child(3n+1) { 
    margin-left: 0; 
} 

por ejemplo: si tiene 3 tramos por cada fila, la expresión anterior eliminará el margen del primer tramo de cada fila. Y el siguiente se elimina el margen derecho para el último elemento de cada fila:

.row-fluid [class*="span"]:nth-child(3n+3) { 
    margin-right: 0; 
} 

Answer 2

.row-fluid [class*="span"]:first-child { 
margin-left: 0; 
} 

Sólo quita margen para el primer hijo por lo que tendrá que añadir otra clase o cambiar span6 tener margin-left:0;

Answer 3

Sus 2 ejemplos en realidad tienen 4 <div class="span6"></div> dentro de un ancho completo 'fila' .. sumar hasta '24', o el doble del ancho para una 'fila' o 'fila-fluido', basado en la configuración de cuadrícula de 12 columnas. Básicamente estás creando flotantes que se caen cuando hay demasiados para caber dentro del ancho de la fila principal. (Esta es la razón por la que parece que 'margin-left: 0' no se está aplicando a su tercera 'span6', que ve como si fuera la primera 'span6' de una segunda fila.)

En una 'fila' predeterminada/fija, la columna anidada 'span *' s + 'offset *' tendrá que ser menor o igual a la columna principal 'span *', O si se trata de una fila de primer nivel , luego 12, porque los anchos flotantes 'span *' están en píxeles.

En un/fluido 'fila-fluido' flexible, los anchos de columna son establecidos por porcentaje, por lo que cada fila y la fila anidada puede han anidado columna 'lapso *' s y 'de compensación *' s que suman 12, cada vez. http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem

Esto debería resolver su problema con la configuración 'fluido de fila'. http://jsfiddle.net/csabatino/uAs6k/9/

<h1>NOW this is working.</h1> 
<div class="row-fluid"> 
    <div class="span6">Content</div> 
    <div class="span6">Content</div> 
</div> 
<div class="row-fluid"> 
    <div class="span6">Content</div> 
    <div class="span6">Content</div> 
</div> 


<h1>Default fixed 'row' is working, too.</h1> 
<div class="row"> 
    <div class="span6">Content</div> 
    <div class="span6">Content</div> 
</div> 
<div class="row"> 
    <div class="span6">Content</div> 
    <div class="span6">Content</div> 
</div> 

Answer 4

Si la aplicación no puede contar con los elementos y se dividen en filas, quitando y añadiendo margin-leftpadding-right funcionaba bien para mí:

.gal [class*="span"] {margin-left:0; padding-right:20px;} 

http://jsfiddle.net/uAs6k/116/

Answer 5

que acabo de hacer esto con jQuery en su lugar:

$(document).ready(function(){ 
    function doFluidFirstSpan() { 
     var top = $('.thumbnails > li:first-child').position().top; 
     $('.thumbnails > li').each(function(){ 
      if($(this).position().top > top) { 
       $(this).addClass("alpha"); 
       top = $(this).position().top; 
      } 
     }); 
    } 

    doFluidFirstSpan(); 
} 

y el css:

.alpha { margin-left: 0 !important; } 

Answer 6

Lo resolví poniendo un div vacío con span12 en el comienzo, feo en el código pero efectivo en la interfaz gráfica de usuario