Bootstrap 3 problemas de diseño de red fluida?

Estoy usando Bootstrap 3 para diseñar mi sitio web con una grilla fluida, pero los cuadros en la grilla no se alinean en una fila.

Puedes ver: enter image description here

Cuando una caja es más alta que otra, la cuadrícula no se deja alineada.

¿Cómo puedo solucionarlo con algún truco? ¡Gracias por la ayuda!

Nota: la altura de la caja es contenido de envoltura automática.

Mi código html

<img href="" />
................ some code .............

No estoy seguro de qué es exactamente lo que intentas lograr, pero el problema se debe a que el contenido de las columnas varía en altura . Hay 3 enfoques generales para arreglar los problemas de alineación / altura de la grilla.

1. Un enfoque de solo CSS (usando el ancho de columna CSS3) como este ..

http://bootply.com/85737

2. Un enfoque ‘clearfix’ como este (requiere iteración cada x columnas). Este es el enfoque recomendado por Bootstrap conocido como “reajustes de respuesta” ..

http://bootply.com/89910 (también hay una variación de solo CSS para este enfoque)

3. Finalmente, puede usar el plugin Isotopo / Masonry. Aquí hay un ejemplo de trabajo que usa Isotope + Bootstrap.

http://bootply.com/61482


Actualización 2017

Otra opción es hacer que las columnas tengan la misma altura (usando flexbox):

Como el problema se debe a la diferencia de altura, puede hacer que las columnas tengan la misma altura en cada fila. Flexbox es la mejor manera de hacerlo, y es compatible de forma nativa con Bootstrap 4.

 .row.display-flex { display: flex; flex-wrap: wrap; } .row.display-flex > [class*='col-'] { display: flex; flex-direction: column; } 

Demostración de igual altura Flexbox


Más sobre Columnas de altura variable Bootstrap

Aplicar una altura para cada columna

.

Daría a tus columnas un nombre de clase:

 
...

Y luego haz algo como esto:

 .outer { height: 200px /* Or whatever the height really is */ } 

Sus columnas están siendo distribuidas de forma extraña debido a las diferentes alturas de las cajas. La aplicación de una altura del elemento contenedor lo solucionará.

La mejor parte es que esto no requiere que agregues

aleatorios que no tengan nada que ver con el contenido.

EDITAR:

También puede aplicar la altura solo cuando está utilizando los puntos de corte ‘sm’ y superiores.

Esto aseguraría que todo se alinee cuando se usen columnas, y que no habrá espacios grandes entre cada una cuando tengan ancho completo (es decir, col-xs-12).

 @media (min-width: 768px) { .outer { height: 200px /* Or whatever */ } } 

Tuve un problema similar. Lo arreglé con este script bastante rápido y sin dolor:

  

en su caso, deberá agregar un identificador de contenedor, por ejemplo, ‘#container’ y agregar la clase a cada elemento, por ejemplo ‘.item’

Aquí hay una solución jQuery muy simple para alinear todos los elementos.

Resolví este problema obteniendo la columna con la altura más alta y estableciendo esta altura en todas las demás columnas. Pruebe el fragmento a continuación.

 setTimeout(function(){ var maxHeight = 0; $('.item').each(function() {if ($(this).height() > maxHeight){maxHeight = $(this).height()}}); $('.item').each(function() {$(this).height(maxHeight)}); }, 1000); 
 .item { border: 1px solid black; } .big { height:50px; background-color:fuchsia; } .normal { height:40px; background-color:aqua; } 
   
I am big
I am normal
I am normal
I am normal
I am normal
I am normal

Creo que necesitas usar clearfix . simplemente ponga la clase clearfix en su elemento padre (en su caso, row, creo) y ponga esto en su css:

 .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-block; } /* start commented backslash hack \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* close commented backslash hack */ 

Estoy de acuerdo con Skelly en que un plugin de mampostería es probablemente el camino a seguir, pero para una solución rápida y sencilla puedes hacer una nueva fila cada vez que quieras algo alineado a la izquierda: es un truco rápido y sucio y puede tener algunos problemas en pequeños viewports.

Mi solución: trabajé con las clases visibles de bootstrap 3