Twitter Bootstrap 3 - Panneaux d'égale hauteur dans une rangée fluide
Je suis nouveau sur Bootstrap 3 et j'aimerais avoir 3 panneaux de même hauteur sur ma page de destination, même si le panneau du milieu contient moins de contenu. Une fois redimensionnés, ils deviennent à la même hauteur, mais ne sont pas lors de la première visite sur la page.
J'ai déjà essayé de cacher le débordement avec CSS et cela coupe le bas du panneau, ce qui n'est pas ce que je veux. Je pense donc avoir besoin d'utiliser jQuery.
Voici mon code:
<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 -->
Cela peut être fait avec CSS flexbox. Il faut seulement un minimum de CSS.
.equal {
display: -webkit-flex;
display: flex;
}
Ajoutez simplement .equal à votre .row et flexbox fera le reste.
http://www.codeply.com/go/BZA25rTY45
UPDATE: Bootstrap 4 utilise flexbox, vous n'avez donc pas besoin du code CSS supplémentaire . http://www.codeply.com/go/0Aq0p6IcHs
Si vous allez utiliser la grille de démarrage, je ne pense pas que vous allez trouver un moyen facile d’y parvenir sans piratage comme le css suivant.
Cela dit fondamentalement. Lorsque la largeur de l'écran est supérieure au point d'arrêt md dans bootstrap, attribuez à tous les éléments de classe panel-body qui sont des descendants directs des éléments de colonne une hauteur minimale de 420px qui se trouve être un "nombre magique" fonctionnant avec votre contenu existant.
Encore une fois, je pense que ceci est une {solution vraiment grossière} _, mais cela "fonctionne" à la rigueur.
@media (min-width: 992px) {
.col-md-4 > .panel > .panel-body {
min-height: 420px;
}
}
Voici un article de CSS-Tricks Colonnes de largeur égale et de hauteur fluide qui couvre différents moyens (display: table & flexbox) pour y parvenir. Cependant, vous devrez peut-être vous éloigner de la grille d'amorçage réactif pour cette tâche particulière.
En outre, voici le Complete Guide to Flexbox
Solution Bootstrap - ajoutez ce css et ajoutez la classe à votre rangée:
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
Il a quelques mises en garde, comme indiqué sur http://getbootstrap.com.vn/examples/equal-height-columns/ , mais il semble que cela suffira pour votre cas.
J'ai aussi vu cette réponse ici .
Update pour le nombre dynamique de colonnes
Bootstrap encapsule automatiquement les colonnes dans de nouvelles lignes lorsque vous ajoutez plus que ne peut en contenir une ligne, mais cette approche de la boîte souple casserait cela. Pour que la flexbox se termine, j'ai découvert que vous pouvez faire quelque chose comme ceci:
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-align-content: flex-end;
align-content: flex-end;
C'est génial lorsque vous avez un nombre dynamique de colonnes, ou des colonnes qui changent de largeur en fonction de la taille de l'écran. Donc, vous pouvez avoir quelque chose comme ça:
<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>
Et tout s'aligne comme prévu. Attention, cela ne fonctionne que dans les nouveaux navigateurs. Plus d'infos ici
N'ayant trouvé aucune de ces méthodes CSS dans mon cas, j'utilise aussi des images dans mes panneaux, mais à la place, j'ai utilisé une simple fonction JQuery pour faire le travail.
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
}
Lorsque les identifiants "panel-1" et "panel-2" se trouvent dans la balise panel, choisissez le plus grand panneau comme celui que vous utilisez pour définir h et appelez la fonction à la fin de votre code HTML.
<body onresize = "resizePanel()">
Je fais aussi en sorte que la fonction soit appelée quand si la fenêtre est redimensionnée en ajoutant l'attribut onresize au corps
cette fonction trouve la plus grande hauteur .panel-body, puis définit comme la hauteur de tous mes éléments .panel-body.
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
}
Maintenant que tous les corps du panneau sont identiques, les hauteurs doivent être effacées lorsque la fenêtre redimensionne avant d'exécuter à nouveau la fonction "panneaux pairs".
$(window).resize(function () {
$(".panel-body").each(function(){
$(this).css('height',""); // clear height values
});
evenpanels();
});
J'ajoute des rembourrages en haut et en bas pour le <div> inférieur.
<div class="xxx" style="padding: 8px 0px 8px 0px">
...
</div>
Après tout, chaque cas est différent et vous devez vous adapter en fonction de la situation.
L'outil de développement Chrome peut être très utile dans des situations comme celle-ci.
