css - columns - equal height div bootstrap
Twitter Bootstrap 3-Paneles de igual altura en una fila de fluidos (6)
Agrego almohadillas superiores e inferiores con estilo para el <div> inferior.
<div class="xxx" style="padding: 8px 0px 8px 0px">
...
</div>
Porque después de todo, cada caso es diferente y debe ajustarse de acuerdo con la situación.
La herramienta de desarrollo de Chrome puede ser muy útil en situaciones como esta.
Soy nuevo en Bootstrap 3 y me gustaría tener 3 paneles en mi página de destino de igual altura, aunque el panel central tenga menos contenido. Cuando se cambian de tamaño, alcanzan la misma altura, pero no están en la visita inicial a la página.
Ya traté de ocultar el desbordamiento con CSS y corta la parte inferior del panel, que no es lo que quiero, así que estoy pensando que necesito usar jQuery.
Aquí está mi código:
<div class="row-fluid">
<!--begin panel 1 -->
<div class="col-md-4">
<div style="text-align:center" class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title text-center">Web y Metrícas</h1>
</div>
<!-- end panel-heading -->
<div class="panel-body">
<p>
<img style="margin: 0 auto;" class="img-responsive" src="web.png" height="30%" width="30%" alt="Web y Metrícas" />
</p>
<p class="text-left lead2">Apoyamos estratégicamente la presencia de tu empresa en el mundo digital, a través de la construcción de recursos web atractivos para tus clientes.</p>
<ul class="text-left">
<li>Web Corporativas</li>
<li>Tiendas Virtuales</li>
<li>Plataformas e-Learning</li>
<li>Arquitectura de Información</li>
<li>Google Analytics, SEO–SEM</li>
<li>Análisis de Competencia Digital</li>
<li>Data Mining</li>
</ul> <a class="btn btn-primary" href="#">Ver más »</a>
</div>
<!-- end panel-body -->
</div>
<!-- end panel-primary -->
</div>
<!--end col-md-4 -->
<!-- begin panel 2 -->
<div class="col-md-4">
<div style="text-align:center" class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title">Gestíon de Redes Socials</h1>
</div>
<!-- end panel-heading -->
<div class="panel-body">
<p>
<img style="margin: 0 auto;" class="img-responsive" src="redes.png" height="30%" width="30%" alt="Gestíon de Redes Socials" />
</p>
<p class="text-left lead2">Crear una experiencia de marca excepcional a través de redes es más inteligente, rápida y las comunicaciones sociales serán más eficientes.</p>
<ul class="text-left">
<li>Compromiso</li>
<li>Publicación</li>
<li>Monitoreo</li>
<li>Analítica</li>
<li>Colaboración</li>
<li>CRM</li>
<li>Movil</li>
</ul> <a class="btn btn-primary" href="#">Ver más »</a>
</div>
<!-- end panel-body -->
</div>
<!-- end panel-primary -->
</div>
<!-- end col-md-4 -->
<!--begin panel 3 -->
<div class="col-md-4">
<div style="text-align:center" class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title">Plan de Medios</h1>
</div>
<!-- end panel-heading -->
<div class="panel-body">
<p>
<img style="margin: 0 auto;" class="img-responsive" src="medios.png" height="30%" width="30%" alt="Plan de Medios" />
</p>
<p class="text-left lead2">Trabajamos en conjunto con la empresa para reforzar las fortalezas de su organización y las comunicamos de forma integral y con un mensaje claro.</p>
<ul class="text-left">
<li>Asesoría Comunicacional</li>
<li>RR.PP</li>
<li>Presencia de Marca</li>
<li>Clipping Digital</li>
<li>Manejo de Crisis</li>
<li>Lobby</li>
<li>Media Training</li>
</ul> <a class="btn btn-primary" href="#">Ver más »</a>
</div>
<!-- end panel-body -->
</div>
<!-- end panel-primary -->
</div>
<!-- end col-md-4 -->
</div>
<!-- end row -->
Esto se puede hacer con CSS flexbox. Solo se necesita CSS mínimo.
.equal {
display: -webkit-flex;
display: flex;
}
Simplemente agregue .equal a su .row y flexbox hace el resto.
http://www.codeply.com/go/BZA25rTY45
ACTUALIZACIÓN: Bootstrap 4 usa flexbox para que no haya necesidad de CSS adicional. http://www.codeply.com/go/0Aq0p6IcHs
No he encontrado ninguno de estos métodos de CSS para trabajar en mi caso. También estoy usando imágenes en mis paneles. En su lugar, utilicé una función simple de JQuery para hacer el trabajo.
window.onload = function resizePanel(){
var h = $("#panel-2").height();
$("#panel-1").height(h); // add a line like this for each panel you want to resize
}
Cuando los ids "panel-1" y "panel-2" están en la etiqueta del panel, elija el panel más grande como el que usa para configurar h y llame a la función al final de su html.
<body onresize = "resizePanel()">
También lo hago para que se llame a la función cuando se cambia el tamaño de la ventana agregando el atributo onresize al cuerpo
Si va a utilizar la cuadrícula de arranque, no creo que vaya a encontrar una manera fácil de lograr esto sin hacks como el siguiente css.
Esto básicamente dice. Cuando el ancho de pantalla es mayor que el punto de interrupción md en bootstrap, otorgue a todos los elementos con panel-body class que son descendientes directos de los elementos de columna una altura mínima de 420px que es un "número mágico" que funciona con su contenido existente .
Una vez más, creo que esta es una solución realmente grosera , pero "funciona" en un apuro.
@media (min-width: 992px) {
.col-md-4 > .panel > .panel-body {
min-height: 420px;
}
}
Aquí hay un artículo de CSS-Tricks Columnas de altura igual de ancho de fluido que cubre varias formas ( display: table y caja flexible) para lograr esto. Sin embargo, es posible que deba alejarse de la cuadrícula de arranque receptiva para esta tarea en particular.
Además, aquí está la Guía completa de Flexbox
Solución de Bootstrap: agregue este css y agregue la clase a su fila:
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
Tiene un par de advertencias, como publicado en http://getbootstrap.com.vn/examples/equal-height-columns/ , pero parece que será lo suficientemente bueno para su caso.
También vi esta respuesta here .
Actualización para el número dinámico de columnas
Bootstrap ajusta automáticamente las columnas en nuevas filas cuando agrega más de lo que puede caber en una fila, pero este enfoque de Flexbox lo rompe. Para que flexbox se ajuste, he descubierto que puedes hacer algo como esto:
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-align-content: flex-end;
align-content: flex-end;
Esto es increíble cuando tiene un número dinámico de columnas o columnas que cambian de ancho de acuerdo con el tamaño de la pantalla. Entonces puedes tener algo como esto:
<div class="row row-eq-height">
<div class="col-sm-6 col-md-4">Content...</div>
<div class="col-sm-6 col-md-4">Content...</div>
<div class="col-sm-6 col-md-4">Content...</div>
<div class="col-sm-6 col-md-4">Content...</div>
<div class="col-sm-6 col-md-4">Content...</div>
</div>
Y todo se alinea como se espera. Solo ten cuidado, solo funciona en navegadores más nuevos. Más información aquí
esta función encuentra la altura más grande del cuerpo del panel, luego hace que sea la altura de todos mis elementos del cuerpo del panel.
function evenpanels() {
var heights = []; // make an array
$(".panel-body").each(function(){ // copy the height of each
heights.push($(this).height()); // element to the array
});
heights.sort(function(a, b){return b - a}); // sort the array high to low
var minh = heights[0]; // take the highest number
$(".panel-body").height(minh); // and apply that to each element
}
Ahora que todos los cuerpos del panel son iguales, las alturas deben borrarse cuando la ventana cambia de tamaño antes de ejecutar de nuevo la función "paneles espaciales".
$(window).resize(function () {
$(".panel-body").each(function(){
$(this).css(''height'',""); // clear height values
});
evenpanels();
});