Question Comment puis-je faire des colonnes Bootstrap à la même hauteur?


J'utilise Bootstrap. Comment puis-je faire trois colonnes de la même hauteur?

Voici une capture d'écran du problème. Je voudrais que les colonnes bleues et rouges aient la même hauteur que la colonne jaune.

Three bootstrap columns with the center column longer than the other two columns

Voici le code:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
    <div class="col-xs-4 panel" style="background-color: red">
        some content
    </div>
    <div class="col-xs-4 panel" style="background-color: yellow">
        catz
        <img width="100" height="100" src="https://lorempixel.com/100/100/cats/">
    </div>
    <div class="col-xs-4 panel" style="background-color: blue">
        some more content
    </div>
</div>
</div>


777
2017-10-30 23:31


origine


Réponses:


Solution 1 utilisant des marges négatives (ne casse pas la réactivité) 

Démo

.row{
    overflow: hidden; 
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

Solution 2 en utilisant la table 

Démo

.row {
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

Solution 3 en utilisant flex ajouté août 2015. Les commentaires postés avant cela ne s'appliquent pas à cette solution.

Démo

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

884
2017-10-30 23:38



Mise à jour 2018

Meilleure approche pour Bootstap 3.x - en utilisant CSS flexbox (et nécessite un minimum de CSS).

.equal {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}

Bootstrap même hauteur flexbox exemple

Pour appliquer uniquement la même hauteur flexbox à des points d'arrêt spécifiques (responsive), utilisez une requête média. Par exemple, voici sm(768px) et plus:

@media (min-width: 768px) {
  .row.equal {
    display: flex;
    flex-wrap: wrap;
  }
}

Cette solution fonctionne également bien pour plusieurs lignes (habillage de colonne):
https://www.bootply.com/gCEXzPMehZ

Autres solutions de contournement

Ces options seront recommandées par d'autres, mais ne sont pas une bonne idée pour un design réactif. Ils ne fonctionnent que pour les mises en page simples à une seule rangée sans emballage de colonne.

1) Utilisation énormes marges négatives et rembourrage

2) Utilisation affichage: table-cellule (Cette solution affecte également la grille responsive, de sorte qu'une requête @media peut être utilisée pour appliquer uniquement table afficher sur des écrans plus larges avant que les colonnes ne s'empilent verticalement)


Bootstrap 4

Flexbox est maintenant utilisé par défaut dans Bootstrap 4, il n'y a donc pas besoin de CSS supplémentaire pour faire des colonnes de hauteur égale: http://www.codeply.com/go/IJYRI4LPwU


216
2018-04-06 10:25



Aucun JavaScript requis. Ajoutez simplement la classe .row-eq-height à votre existant .row juste comme ça:

<div class="row row-eq-height">
  <div class="col-xs-12 col-sm-4 panel" style="background-color: red">
    some content
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: yellow">
    kittenz
  <img src="http://placekitten.com/100/100">
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: blue">
    some more content
  </div>
</div>

Astuce: si vous avez plus de 12 colonnes dans votre rangée, la grille d'amorçage échouera à l'envelopper. Alors ajoutez un nouveau div.row.row-eq-height chaque 12 colonnes.

Astuce: vous devrez peut-être ajouter

<link rel="stylesheet" href="http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css" />

à ton html


78
2018-04-29 10:40



Pour répondre à votre question, c'est tout ce dont vous avez besoin voir la démo complète avec css préfixé:

/* Using col-xs media query breakpoint but you can change 481 to 768 to only apply to col-sm and above if you'd like*/

@media only screen and (min-width : 481px) {
    .flex-row {
        display: flex;
        flex-wrap: wrap;
    }
    .flex-row > [class*='col-'] {
        display: flex;
        flex-direction: column;
    }
    .flex-row.row:after, 
    .flex-row.row:before {
        display: flex;
    }
}

Screenshot of Codepen

Pour ajouter du support pour le contenu des miniatures flex dans les colonnes flex comme la capture d'écran ci-dessus, ajoutez également ceci ... Notez que vous pouvez le faire avec des panneaux: 

.flex-row .thumbnail,
.flex-row .caption {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}
.flex-text {
    flex-grow: 1;
}    
.flex-row img {
    width: 100%;
}

Bien que Flexbox ne fonctionne pas dans IE9 et ci-dessous, vous pouvez utiliser la démo avec un retour en utilisant des balises conditionnelles avec quelque chose comme grilles JavaScript comme un polyfill:

<!--[if lte IE 9]>

<![endif]-->

Comme pour les deux autres exemples dans la réponse acceptée ... La démo de table est une idée décente mais est mise en œuvre mal. L'application de ce CSS sur les classes de colonnes bootstrap supprimera sans aucun doute complètement le cadre de la grille. Vous devez utiliser un sélecteur personnalisé pour un et deux styles de tableaux ne doivent pas être appliqués à [class*='col-'] qui ont des largeurs définies. Cette méthode ne doit être utilisée que si vous voulez des colonnes de hauteur égale et de largeur égale. Il n'est pas destiné à d'autres mises en page et n'est pas réactif. Nous pouvons en faire le repli sur les écrans mobiles ...

<div class="table-row-equal">
<div class="thumbnail">
    Content...
</div>
<div class="thumbnail">
    Content...
</div>
</div>
@media only screen and (min-width : 480px){
    .table-row-equal {
        display: table;
        width: 100%;
        table-layout: fixed;
        border-spacing: 30px 0px;
        word-wrap: break-word;
    }
    .table-row-equal .thumbnail {
        float: none;
        display: table-cell;
        vertical-align: top;
        width: 1%;
    }
}

Enfin, la première démo dans la réponse acceptée qui implémente une version de la une vraie mise en page est un bon choix pour certaines situations, mais ne convient pas pour les colonnes bootstrap. La raison en est que toutes les colonnes se développent à la hauteur du conteneur. Donc, cela va également rompre la réactivité puisque les colonnes ne s'étendent pas aux éléments à côté d'eux, mais au conteneur entier. Cette méthode ne vous permettra pas non plus d'appliquer des marges du bas aux lignes et causera également d'autres problèmes en cours de route comme le défilement des étiquettes d'ancrage.

Pour le code complet, voir le codepen qui préfixe automatiquement le code flexbox.


46
2017-12-20 12:48



Vous ne montrez qu'une ligne, donc votre cas d'utilisation peut être limité à cela. Juste au cas où vous avez plusieurs lignes, ce plugin - github Javascript-grilles - fonctionne parfaitement! Il fait en sorte que chaque panneau s'étende jusqu'au panneau le plus haut, ce qui donne à chaque rangée potentiellement une hauteur différente en fonction du panneau le plus haut de cette rangée. C'est une solution jquery vs css, mais je voulais le recommander comme une approche alternative.


38
2017-11-19 17:47



Si vous voulez que cela fonctionne dans n'importe quel navigateur, utilisez javascript:

$( document ).ready(function() {
    var heights = $(".panel").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".panel").height(maxHeight);
});

24
2018-02-26 21:03



.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;
 }

De:

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css


8
2017-11-10 18:21



Vous pouvez également utiliser inline-flex, ce qui fonctionne plutôt bien et peut être un peu plus propre que de modifier chaque élément de ligne avec CSS.

Pour mon projet, je voulais que chaque rangée dont les éléments enfants avaient des bordures aient la même hauteur afin que les bordures aient l'air déchiquetées. Pour cela, j'ai créé une classe CSS simple.

.row.borders{
    display: inline-flex;
    width: 100%;
}

7
2018-05-12 19:26