css - rejillas - title html attribute

Twitter-bootstrap: ¿Cómo utilizar correctamente la clase de fila-fluido?

Question

Tengo un problema para entender cómo funciona la clase de row-fluid . De acuerdo con la documentation se ajusta al diseño fluido, como el diseño sensible. Entonces, si tiene suficiente espacio, lo hace encajar en la misma fila, de lo contrario, pasa a la siguiente línea.

Sin embargo, mirando este ejemplo aquí: https://duelify.com/

Por extraño que parezca, los tres primeros encabezados de artículos encajan en la primera fila. La segunda fila y el resto están ligeramente empujados hacia la derecha. Pero mirando el html (abajo) no hay clases adicionales involucradas para causar este "efecto secundario".

¿Por qué los encabezados de artículos no encajan en una fila? ¿Por qué existe esta brecha aleatoria en el medio? ¿Hay alguna manera de hacer que aparezcan ordenados sin espacios entre ellos?

Answer 1

El siguiente código funcionará después del contenedor (para un diseño Responsive):

<div class="container-fluid">
    <div class="row-fluid">
       <div class="span4"></div> 
    </div>
    <div class="row-fluid">
      <div class="span4"></div>
    </div>
</div>

Answer 2

En tu caso, el código correcto será como

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

etc...

En cada clase de row-fluid , la suma máxima de clases de span debe ser de hasta 12. Las clases de rango tienen margen izquierdo. Solo el último hijo en una row-fluid no tiene margen izquierdo.

Mira de nuevo ahora los ejemplos en la documentation . " Para un diseño simple de dos columnas, cree un .row y agregue el número apropiado de columnas .span. Como esta es una cuadrícula de 12 columnas, cada .span abarca un número de esas 12 columnas, y siempre debe agregar hasta 12 para cada fila (o el número de columnas en el padre) " .

Answer 3

Hay un par de cosas sucediendo aquí. Recuerde, de forma predeterminada, el tamaño total de los vanos en una fila de fluidos debería sumar 12. Aquí hay un poco más, por lo que cuando css define el ancho de un span4 como aproximadamente el 33%, en realidad están excediendo el 100%. , por lo que van a una nueva línea. Pero no se están limpiando, por lo que terminas con ellos dando vueltas y haciendo columnas como en la página.

La razón por la que tiene el espacio a la izquierda de lo que sería la segunda fila es que bootstrap define ''cunetas'' para dar un margen a las columnas. Debido al exceso de columnas que se están utilizando, las ves. Existe un css específico para reducir el margen en el primer tramo de una fila a 0, por lo que no hay espacio en el primero.

Las ''filas'' posteriores solo tienen dos columnas porque la presencia del canal adicional elimina los cálculos y hace que los tres span4 sumen más del 100% de ancho, lo que hace que se ajusten.