css - contenedores - Bootstrap 3 problemas de diseño de red fluida?
padding bootstrap 3 (7)
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 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:
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
<div class="row">
<?php foreach($contens as $content){?>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="contents-block">
<div class="image"><img href="<?php echo $content[''image''];?>" />
</div>
................ some code .............
</div>
</div>
<?php } ?>
</div>
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
<div class="row">
<?php
$indexLg = 1;
$indexSm = 1;
foreach($contens as $content) {?>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="contents-block">
<div class="image"><img href="<?php echo $content[''image''];?>" />
</div>
</div>
</div>
<?php
if($indexLg%4 == 0) {
$indexLg = 1;
?>
<div class="clearfix visible-lg visible-md"></div>
<?php
}
if($indexSm%2 == 0) {
$indexSm = 1;
?>
<div class="clearfix visible-sm"></div>
<?php
}
?>
<div class="clearfix visible-xs"></div>
<?php
}
} ?>
Aplicar una altura para cada columna <div> .
Daría a tus columnas un nombre de clase:
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 outer">
...
</div>
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 <div> 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 garantizarí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:
<script>
$.getScript(''//cdn.jsdelivr.net/isotope/1.5.25/jquery.isotope.min.js'',function(){
$(''#container'').isotope({
itemSelector : ''.items'',
layoutMode : ''fitRows''
});
});
</script>
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;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-4 item big">I am big</div>
<div class="col-xs-4 item normal">I am normal</div>
<div class="col-xs-4 item normal">I am normal</div>
<div class="col-xs-4 item normal">I am normal</div>
<div class="col-xs-4 item normal">I am normal</div>
<div class="col-xs-4 item normal">I am normal</div>
</div>
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 ..
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.
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;
}