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


965

J'utilise Bootstrap. Comment faire trois colonnes de même hauteur?

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

Trois colonnes bootstrap avec la colonne centrale plus longue que les deux autres colonnes

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>



11
Il y a un article sur le site Web de bootstrap avec une solution à 5 lignes getbootstrap.com.vn/examples/equal-height-columns
Eduard Gamonal

2
L'exemple sur Bootstrap rompt la réactivité d'Eduard. Le flex .rowmanque flex-wrap: wrap;. Voici un exemple de fonctionnement avec réactivité: codepen.io/bootstrapped/details/RrabNe
Bryan Willis

Solution possible - Une image transparente de 1 pixel de large dans les autres colonnes. Cette nouvelle image d'une largeur de pixel correspond à la hauteur de pixel de l'image du chat dans l'exemple ci-dessus. (Peut ne pas fonctionner ou être pratique dans votre situation)
Sql Surfer

Dans Bootstrap 4, nous pouvons utiliser la carte pour la même chose
Amjad Rehman A

Réponses:


1045

Solution 4 à l'aide de Bootstrap 4

Bootstrap 4 utilise Flexbox, il n'y a donc pas besoin de CSS supplémentaire.

Démo

<div class="container">
    <div class="row ">
        <div class="col-md-4" style="background-color: red">
          some content
        </div>
        <div class="col-md-4" style="background-color: yellow">
          catz
          <img width="100" height="100" src="https://placekitten.com/100/100/">
        </div>
        <div class="col-md-4" style="background-color: green">
          some more content
        </div>
    </div>
</div>

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

Démo

.row{
    overflow: hidden; 
}

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

Solution 2 en utilisant un tableau

Démo

.row {
    display: table;
}

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

La solution 3 utilisant flex a été ajoutée en août 2015. Les commentaires publié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;
}

7
Considérez-le comme la colonne aspirée dans un espace négatif. Si vous supprimez le débordement, vous verrez ce qui se passe.
Popnoodles

9
Si vous ciblez spécifiquement la classe de colonne bootstrap, vous devriez probablement utiliser une ancre ^ au lieu d'un caractère générique *. L'utilisation de ^ indiquera que la classe doit commencer par col- car car le caractère générique affiché correspondra à n'importe quelle classe avec col- n'importe où dans la chaîne, ce qui peut avoir des effets indésirables sur les styles où vous pouvez avoir utilisé la convention col-. (c'est-à-dire stuff-col-morestuff).
Logan G.

7
Belle réponse, avec quelques mises en garde. La solution 1 désactive le flottant et rompt donc le comportement réactif de la grille d'amorçage. La solution 2 (expliquée plus en détail dans positioniseverything.net/articles/onetruelayout/equalheight ) n'affiche pas la bordure inférieure (car elle est coupée quelque part dans l'espace de remplissage).
Ohad Schneider

14
La solution 3 rompt la réactivité des lignes.
SPRBRN du

10
@Popnoodles vous devez ajouter flex-wrap: wrap;au troisième exemple pour activer la réactivité. Vous voudrez également ajouter l'affichage: flex; flex-direction: colonne; à la classe de colonne. Si vous allez utiliser .row et non une classe personnalisée, vous devrez fournir un remplacement pour les navigateurs plus anciens qui modifient le flex d'affichage. Voici un exemple
Bryan Willis

321

Mise à jour 2020

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

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

Exemple de flexbox Bootstrap de même hauteur

Pour appliquer la flexbox de la même hauteur uniquement à des points d'arrêt spécifiques (réactifs), utilisez une requête multimé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 une conception réactive. Celles-ci ne fonctionnent que pour les mises en page simples à une seule ligne sans habillage de colonne.

1) Utiliser d' énormes marges négatives et un rembourrage

2) Utilisation de display: table-cell (cette solution affecte également la grille réactive, donc une requête @media ne peut être utilisée que pour appliquer l' tableaffichage 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'est donc pas nécessaire que le CSS supplémentaire crée des colonnes de hauteur égale: http://www.codeply.com/go/IJYRI4LPwU

Exemple:

<div class="container">
    <div class="row">
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>
</div>

5
Vous pouvez utiliser une requête multimédia pour appliquer la flexbox uniquement sur des appareils plus grands / plus larges. J'ai mis à jour le bootply: bootply.com/Cn6fA6LuTq
Zim

Au cas où quelqu'un serait intéressé, j'ai créé un stylo pour démontrer des effets similaires sur un formulaire utilisant Flexbox.
Justin Lau

2
C'est un bug Safari connu avec flexbox: proof: bugs.webkit.org/show_bug.cgi?id=137730
Zim

5
@Stanley, le commentaire sur "n'est plus réactif" est ancien et non pertinent.
Zim

1
C'est le seul correctif qui a fonctionné pour moi. Merci Zim c'est super!
Ryan NZ

83

Pas besoin de JavaScript. Ajoutez simplement la classe .row-eq-heightà votre existant .rowcomme ceci:

<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 ligne, la grille d'amorçage ne parviendra pas à l'envelopper. Ajoutez donc une nouvelle div.row.row-eq-heightchaque 12 colonnes.

Astuce: vous devrez peut-être ajouter

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

à votre html


5
basé sur flexbox. Ne fonctionne pas dans IE8 ou 9, ni Android 2.x caniuse.com/#feat=flexbox
Chris Moschini

60
Remarque: getbootstrap.vn n'est pas "Bootstrap". C'est un projet tiers.
Zim

Cela semble cependant être intégré dans bootstrap v4.
Cyril Duchon-Doris

J'ai inclus le bon CSS (sur le site .vn) mais ça gâche tout. il est basé sur flex
ekkis

Super ... enfer de plugin.
Armada

63

Pour répondre à votre question est vous avez tous besoin voir la démo complète avec réponse 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;
    }
}

Capture d'écran de Codepen

Pour ajouter la prise en charge du contenu des vignettes flex dans les colonnes flex comme la capture d'écran ci-dessus, ajoutez également ceci ... Notez que vous pouvez également le faire avec les 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 repli en utilisant des balises conditionnelles avec quelque chose comme des grilles javascript comme polyfill:

<!--[if lte IE 9]>

<![endif]-->

Quant aux deux autres exemples de la réponse acceptée ... La démonstration de la table est une idée décente mais est mal mise en œuvre. L'application de ce CSS sur les classes de colonnes bootstrap en particulier rompra sans aucun doute 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-']des largeurs définies. Cette méthode doit être utilisée UNIQUEMENT si vous voulez des colonnes de hauteur ET de largeur égales. Il n'est pas destiné à d'autres mises en page et n'est PAS réactif. On peut cependant y revenir 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 de la réponse acceptée qui implémente une version de la seule mise en page vraie est un bon choix pour certaines situations, mais ne convient pas aux colonnes d'amorçage. La raison en est que toutes les colonnes se développent à la hauteur du conteneur. Ainsi, cela interrompra également la réactivité, car les colonnes ne s'étendent pas aux éléments à côté d'eux, mais à l'ensemble du conteneur. Cette méthode ne vous permettra pas non plus d'appliquer des marges inférieures aux lignes et entraînera également d'autres problèmes en cours de route, comme le défilement des balises d'ancrage.

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


11
C'est la seule réponse qui a réellement fonctionné pour moi. Les 3 réponses les mieux notées n'étaient qu'une perte de temps
ken2k


1
@TheSchecke est ici le correctif. Pour autant que je sache, cela fonctionne maintenant dans tous les navigateurs pris en charge par flexbox. Veuillez me faire savoir si je me trompe. s.codepen.io/bootstrapped/debug/pboJNd . Le problème était lié au fait d' row:after, row:beforeavoir display: set de table qui apparemment n'aime pas Safari.
Bryan Willis

2
Juste un avertissement que cela casse vraiment mal sur le navigateur Safari de l'iPad
Matthew Lock

1
Désolé d'entendre cela @MatthewLock. Je viens de tester sur mon iPad Air IOS 8.1 avec le dernier safari et cela fonctionne. J'ai également pu tester sur crossbrowsertesting.com en utilisant l'iPad mini retina avec Safari 7 et cela semble bien fonctionner aussi. Voici les résultats de ce test. Pouvez-vous fournir la version iPad et Safari que vous utilisez? J'aimerais essayer d'obtenir ce correctif dès que possible ou au moins de mettre un commentaire dans la réponse car je sais que beaucoup de gens l'utilisent.
Bryan Willis

42

Vous ne montrez qu'une seule ligne, votre cas d'utilisation peut donc être limité à cela. Juste au cas où vous avez plusieurs lignes, ce plugin - github Javascript-grids - fonctionne parfaitement! Il permet à chaque panneau de s'étendre jusqu'au panneau le plus haut, donnant à 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 la recommander comme approche alternative.


1
La seule solution qui fonctionne vraiment et qui ne casse pas la réactivité
Artur Kędzior

Cela vous permet-il de spécifier que les colonnes doivent être carrées - ou tout simplement de la même hauteur?
niico

@niico 14 - cela fait un moment que je ne l'ai pas utilisé, mais dans mon application, l'exigence est que les éléments de chaque ligne aient la même hauteur, mais la hauteur peut varier d'une ligne à l'autre. Étant donné que la hauteur est fonction des éléments de la ligne, si la hauteur de votre élément est égale à leur largeur, ils doivent alors se présenter sous forme de carrés.
globalSchmidt

30

Si vous souhaitez 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);
});

1
Avoir un div class = "row" avec un nombre variable de panneaux chacun de la classe "col-md-4" qui devrait me donner 3 colonnes et un nombre inconnu de lignes, selon le nombre d'articles que je veux lister. Ce JS a fonctionné et nécessite un minimum de changement dans mon HTML / CSS, contrairement à divers trucs CSS que j'ai essayés. La seule chose que j'ai changé était de marquer tous mes panneaux de colonnes avec une classe supplémentaire, c'est-à-dire "même-hauteur-panneau", puis d'utiliser $ (". Même-hauteur-panneau") au lieu de $ (". Panneau")
nidalpres

1
La seule solution qui a fonctionné pour moi après une journée d'expérimentation avec des trucs CSS.
Dinosaurius

1
C'est une bonne solution, mais ce .ready()n'est pas le bon moment pour l'appeler - elle devrait être appelée.load()
jave.web

1
@ jave.web Si vous pensez que c'est une bonne solution, veuillez lui donner un coup de pouce. Merci
paulalexandru

Utilisez window.onload = function() {...function content above...}plutôt. Cela fonctionne mieux.
Blackpanther0001

10

J'ai essayé beaucoup de suggestions faites dans ce fil et sur d'autres pages, mais aucune solution ne fonctionnait à 100% dans tous les navigateurs.

J'ai donc expérimenté pas mal de temps et j'ai trouvé ça. Une solution complète pour les colonnes Bootstrap Equal Height à l'aide de flexbox avec seulement 1 classe. Cela fonctionne dans tous les principaux navigateurs IE10 +.

CSS:

.row.equal-cols {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.row.equal-cols:before,
.row.equal-cols:after {
  display: block;
}

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

.row.equal-cols > [class*='col-'] > * {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto; 
}

HTML:

<div class="container">
  <div class="row equal-cols">
    <div class="col-sm-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-4">
      <div class="content"></div>
    </div>
  </div>
</div>

Pour prendre en charge encore plus de versions d'IE, vous pouvez, par exemple, utiliser https://github.com/liabru/jquery-match-height et cibler toutes les colonnes enfants de .equal-cols. Comme ça:

// Create a check for IE9 (or any other specific browser).
if(IE9) {
  $(".row.equal-cols > [class*='col-']").matchHeight();
}

Sans ce polyfill, les colonnes se comporteront comme les colonnes Bootstrap habituelles, ce qui est une assez bonne solution de rechange.


Cela a fonctionné brillamment pour moi. Merci!
randlet

8

Vous pouvez également utiliser inline-flex qui fonctionne assez bien et peut être un peu plus propre que la modification de chaque élément de ligne avec CSS.

Pour mon projet, je voulais que chaque rangée dont les éléments enfants aient des bordures soit de la même hauteur afin que les bordures soient dentelées. Pour cela, j'ai créé une classe css simple.

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

2
Bien qu'il réussisse à faire tous les contenus de la ligne à la même hauteur; Cela rompt la réactivité de Bootstrap.
Christine268


7

solution jquery effrontée si quelqu'un est intéressé. Assurez-vous simplement que tous vos cols (el) ont un nom de classe commun ... fonctionne également si vous le liez à $ (window) .resize

function equal_cols(el)
{
    var h = 0;
    $(el).each(function(){
        $(this).css({'height':'auto'});
        if($(this).outerHeight() > h)
        {
            h = $(this).outerHeight();
        }
    });
    $(el).each(function(){
        $(this).css({'height':h});
    });
}

Usage

$(document).ready(function(){
   equal_cols('.selector');
});

Remarque: ce message a été modifié conformément au commentaire de @Chris, indiquant que le code n'a été défini que sur la dernière hauteur la plus élevée de la $.each()fonction


Ceci est sous-estimé - simple et petit mais redimensionnera toutes les colonnes sans avoir besoin d'avoir un nombre fixe de colonnes dans une rangée. Joli!
Jordon

1
Cela ne fonctionne pas, car vous définissez la dernière plus grande hauteur dans chaque fonction. Si la troisième colonne est la colonne la plus haute, les colonnes 1 et 2 n'obtiennent pas la bonne hauteur. Vous devez définir la dernière ligne "$ (this) .css ({'height': h});" après chaque fonction. Je ferai un montage.
Chris

7

Certaines des réponses précédentes expliquent comment rendre les divs de la même hauteur, mais le problème est que lorsque la largeur est trop étroite, les divs ne s'empilent pas, vous pouvez donc implémenter leurs réponses avec une partie supplémentaire. Pour chacun, vous pouvez utiliser le nom CSS donné ici en plus de la classe de ligne que vous utilisez, donc le div devrait ressembler à ceci si vous voulez toujours que les div soient côte à côte:

<div class="row row-eq-height-xs">Your Content Here</div>

Pour tous les écrans:

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

Pour quand vous souhaitez utiliser sm:

.row-eq-height-sm {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:768px) {
    .row-eq-height-sm {
        flex-direction: row;
    }
}

Pour quand vous voulez md:

.row-eq-height-md {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:992px) {
    .row-eq-height-md {
        flex-direction: row;
    }
}

Pour quand vous voulez utiliser lg:

.row-eq-height-lg {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:1200px) {
    .row-eq-height-md {
        flex-direction: row;
    }
}

EDIT Sur la base d'un commentaire, il existe en effet une solution plus simple, mais vous devez vous assurer de donner des informations sur les colonnes de la plus grande largeur souhaitée pour toutes les tailles jusqu'à xs (par exemple <div class="col-md-3 col-sm-4 col-xs-12">:

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

Vous avez rendu cela beaucoup plus compliqué que nécessaire :) `Utilisez simplement flex-wrap: wrap;alors vous n'avez pas besoin de tous les éléments séparés ... à moins que vous ne les vouliez spécifiquement.
Bryan Willis

cela échoue sur iPad Safari
Matthew Lock

6

Je suis surpris de ne pas avoir trouvé de solution valable ici fin 2018. Je suis allé de l'avant et j'ai moi-même trouvé une solution Bootstrap 3 en utilisant flexbox.

Exemple propre et simple:

Exemple de largeurs de colonne correspondantes dans Bootstrap 3

HTML

<div class="row row-equal">
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
        <p>Text</p>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
        <img src="//placehold.it/200x200">
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
        <p>Text</p>
    </div>  
</div>

CSS

img {
  width: 100%;
}
p {
  padding: 2em;
}
@media (min-width: 768px) {
  .row-equal {
    display: flex;
    flex-wrap: wrap;
  }
  .col-equal {
    margin: auto;
  }
}

Voir la démo de travail: http://jsfiddle.net/5kmtfrny/


5

Je sais que je suis très en retard, mais maintenant vous pouvez utiliser l'attribut de style "min-height" pour atteindre votre objectif.


5

Si quelqu'un utilise bootstrap 4 et recherche des colonnes de hauteur égale, utilisez simplement le row-eq-heightparent div

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-eq-height">
  <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4</div>
  <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4<br>this is<br>a much<br>taller<br>column<br>than the others</div>
  <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4</div>
</div>

Réf: http://getbootstrap.com.vn/examples/equal-height-columns/


3

voici ma solution (CSS compilé):

.row.row-xs-eq {
  display: table;
  table-layout: fixed;
  margin: 0;
}

.row.row-xs-eq::before {
  content: none;
}

.row.row-xs-eq::after {
  content: none;
}

.row.row-xs-eq > [class^='col-'] {
  display: table-cell;
  float: none;
  padding: 0;
}

@media (min-width: 768px) {
  .row.row-sm-eq {
    display: table;
    table-layout: fixed;
    margin: 0;
  }

  .row.row-sm-eq::before {
    content: none;
  }

  .row.row-sm-eq::after {
    content: none;
  }

  .row.row-sm-eq > [class^='col-'] {
    display: table-cell;
    float: none;
    padding: 0;
  }
}

@media (min-width: 992px) {
  .row.row-md-eq {
    display: table;
    table-layout: fixed;
    margin: 0;
  }

  .row.row-md-eq::before {
    content: none;
  }

  .row.row-md-eq::after {
    content: none;
  }

  .row.row-md-eq > [class^='col-'] {
    display: table-cell;
    float: none;
    padding: 0;
  }
}

@media (min-width: 1200px) {
  .row.row-lg-eq {
    display: table;
    table-layout: fixed;
    margin: 0;
  }

  .row.row-lg-eq::before {
    content: none;
  }

  .row.row-lg-eq::after {
    content: none;
  }

  .row.row-lg-eq > [class^='col-'] {
    display: table-cell;
    float: none;
    padding: 0;
  }
}

Votre code ressemblerait donc à:

<div class="row row-sm-eq">
  <!-- your old cols definition here -->
</div>

Fondamentalement, c'est le même système que vous utilisez avec des .col-*classes avec cette différence dont vous avez besoin pour appliquer des .row-*classes à la ligne elle-même.

Les .row-sm-eqcolonnes seront empilées sur les écrans XS. Si vous n'avez pas besoin de les empiler sur les écrans que vous pouvez utiliser .row-xs-eq.

La version SASS que nous utilisons réellement:

.row {
  @mixin row-eq-height {
    display: table;
    table-layout: fixed;
    margin: 0;

    &::before {
      content: none;
    }

    &::after {
      content: none;
    }

    > [class^='col-'] {
      display: table-cell;
      float: none;
      padding: 0;
    }
  }

  &.row-xs-eq {
    @include row-eq-height;
  }

  @media (min-width: $screen-sm-min) {
    &.row-sm-eq {
      @include row-eq-height;
    }
  }

  @media (min-width: $screen-md-min) {
    &.row-md-eq {
      @include row-eq-height;
    }
  }

  @media (min-width: $screen-lg-min) {
    &.row-lg-eq {
      @include row-eq-height;
    }
  }
}

Démo en direct


Remarque: le mélange .col-xs-12et l' .col-xs-6intérieur d'une seule rangée ne fonctionneraient pas correctement.


C'est bon. Ma solution est la même. Et il y a une possibilité d'avoir des colonnes de hauteur égale avec des espaces standard de 30 pixels de Bootstrap entre les colonnes utilisant border-spacinget des marges négatives.
max

3

Il y a un problème avec l'utilisation de la solution 1 lors de son application sur la seule colonne des lignes. Souhaite améliorer la solution 1.

 [class^="col-"]:not([class*="-12"]){
      margin-bottom: -99999px;
      padding-bottom: 99999px;
  }

(Désolé, je ne peux pas commenter la réponse de Popnoodles. Je n'ai pas assez de réputation)


2

Meilleur là-bas:

Réflexe Github - Docs

Fonctionne avec bootstrap

Mise à jour:

  1. Inclure le CSS
  2. Mettez à jour votre code:

/*!
 *
 * Reflex v1.0
 *
 * Reflex is a flexbox grid which provides a way to take advantage of emerging
 * flexbox support while providing a fall back to inline-block on older browsers
 *
 * Built by Lee Jordan G.C.S.E.
 * email: ldjordan@gmail.com
 * github: https://github.com/leejordan
 *
 * Structure and calculations are inspired by twitter bootstrap
 *
 */
.reflex-order-12 {
  -webkit-order: 12;
  -ms-flex-order: 12;
  order: 12;
}
.reflex-order-11 {
  -webkit-order: 11;
  -ms-flex-order: 11;
  order: 11;
}
.reflex-order-10 {
  -webkit-order: 10;
  -ms-flex-order: 10;
  order: 10;
}
.reflex-order-9 {
  -webkit-order: 9;
  -ms-flex-order: 9;
  order: 9;
}
.reflex-order-8 {
  -webkit-order: 8;
  -ms-flex-order: 8;
  order: 8;
}
.reflex-order-7 {
  -webkit-order: 7;
  -ms-flex-order: 7;
  order: 7;
}
.reflex-order-6 {
  -webkit-order: 6;
  -ms-flex-order: 6;
  order: 6;
}
.reflex-order-5 {
  -webkit-order: 5;
  -ms-flex-order: 5;
  order: 5;
}
.reflex-order-4 {
  -webkit-order: 4;
  -ms-flex-order: 4;
  order: 4;
}
.reflex-order-3 {
  -webkit-order: 3;
  -ms-flex-order: 3;
  order: 3;
}
.reflex-order-2 {
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
}
.reflex-order-1 {
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
}
.reflex-order-0 {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
}
.reflex-container {
  display: inline-block;
  display: -webkit-flex;
  display: flex;
  zoom: 1;
  *display: inline;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  letter-spacing: -0.31em;
  *letter-spacing: normal;
  word-spacing: -0.43em;
  list-style-type: none;
}
.reflex-container *,
.reflex-container:before,
.reflex-container:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 100%;
  letter-spacing: normal;
  word-spacing: normal;
  white-space: normal;
}
.reflex-container *:before,
.reflex-container *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
[class*="reflex-col-"] {
  width: 100%;
  vertical-align: top;
  position: relative;
  display: inline-block;
  display: -webkit-flex;
  display: flex;
  zoom: 1;
  *display: inline;
  text-align: left;
  text-align: start;
}
.reflex-item {
  display: block;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
}
_:-ms-fullscreen,
:root .reflex-item {
  width: 100%;
}
.reflex-col-12 {
  width: 100%;
  *width: 99.9%;
}
.reflex-col-11 {
  width: 91.66666666666666%;
  *width: 91.56666666666666%;
}
.reflex-col-10 {
  width: 83.33333333333334%;
  *width: 83.23333333333335%;
}
.reflex-col-9 {
  width: 75%;
  *width: 74.9%;
}
.reflex-col-8 {
  width: 66.66666666666666%;
  *width: 66.56666666666666%;
}
.reflex-col-7 {
  width: 58.333333333333336%;
  *width: 58.233333333333334%;
}
.reflex-col-6 {
  width: 50%;
  *width: 49.9%;
}
.reflex-col-5 {
  width: 41.66666666666667%;
  *width: 41.56666666666667%;
}
.reflex-col-4 {
  width: 33.33333333333333%;
  *width: 33.23333333333333%;
}
.reflex-col-3 {
  width: 25%;
  *width: 24.9%;
}
.reflex-col-2 {
  width: 16.666666666666664%;
  *width: 16.566666666666663%;
}
.reflex-col-1 {
  width: 8.333333333333332%;
  *width: 8.233333333333333%;
}
@media (min-width: 480px) {
  .reflex-col-xs-12 {
    width: 100%;
    *width: 99.9%;
  }
  .reflex-col-xs-11 {
    width: 91.66666666666666%;
    *width: 91.56666666666666%;
  }
  .reflex-col-xs-10 {
    width: 83.33333333333334%;
    *width: 83.23333333333335%;
  }
  .reflex-col-xs-9 {
    width: 75%;
    *width: 74.9%;
  }
  .reflex-col-xs-8 {
    width: 66.66666666666666%;
    *width: 66.56666666666666%;
  }
  .reflex-col-xs-7 {
    width: 58.333333333333336%;
    *width: 58.233333333333334%;
  }
  .reflex-col-xs-6 {
    width: 50%;
    *width: 49.9%;
  }
  .reflex-col-xs-5 {
    width: 41.66666666666667%;
    *width: 41.56666666666667%;
  }
  .reflex-col-xs-4 {
    width: 33.33333333333333%;
    *width: 33.23333333333333%;
  }
  .reflex-col-xs-3 {
    width: 25%;
    *width: 24.9%;
  }
  .reflex-col-xs-2 {
    width: 16.666666666666664%;
    *width: 16.566666666666663%;
  }
  .reflex-col-xs-1 {
    width: 8.333333333333332%;
    *width: 8.233333333333333%;
  }
}
@media (min-width: 768px) {
  .reflex-col-sm-12 {
    width: 100%;
    *width: 99.9%;
  }
  .reflex-col-sm-11 {
    width: 91.66666666666666%;
    *width: 91.56666666666666%;
  }
  .reflex-col-sm-10 {
    width: 83.33333333333334%;
    *width: 83.23333333333335%;
  }
  .reflex-col-sm-9 {
    width: 75%;
    *width: 74.9%;
  }
  .reflex-col-sm-8 {
    width: 66.66666666666666%;
    *width: 66.56666666666666%;
  }
  .reflex-col-sm-7 {
    width: 58.333333333333336%;
    *width: 58.233333333333334%;
  }
  .reflex-col-sm-6 {
    width: 50%;
    *width: 49.9%;
  }
  .reflex-col-sm-5 {
    width: 41.66666666666667%;
    *width: 41.56666666666667%;
  }
  .reflex-col-sm-4 {
    width: 33.33333333333333%;
    *width: 33.23333333333333%;
  }
  .reflex-col-sm-3 {
    width: 25%;
    *width: 24.9%;
  }
  .reflex-col-sm-2 {
    width: 16.666666666666664%;
    *width: 16.566666666666663%;
  }
  .reflex-col-sm-1 {
    width: 8.333333333333332%;
    *width: 8.233333333333333%;
  }
}
@media (min-width: 992px) {
  .reflex-col-md-12 {
    width: 100%;
    *width: 99.9%;
  }
  .reflex-col-md-11 {
    width: 91.66666666666666%;
    *width: 91.56666666666666%;
  }
  .reflex-col-md-10 {
    width: 83.33333333333334%;
    *width: 83.23333333333335%;
  }
  .reflex-col-md-9 {
    width: 75%;
    *width: 74.9%;
  }
  .reflex-col-md-8 {
    width: 66.66666666666666%;
    *width: 66.56666666666666%;
  }
  .reflex-col-md-7 {
    width: 58.333333333333336%;
    *width: 58.233333333333334%;
  }
  .reflex-col-md-6 {
    width: 50%;
    *width: 49.9%;
  }
  .reflex-col-md-5 {
    width: 41.66666666666667%;
    *width: 41.56666666666667%;
  }
  .reflex-col-md-4 {
    width: 33.33333333333333%;
    *width: 33.23333333333333%;
  }
  .reflex-col-md-3 {
    width: 25%;
    *width: 24.9%;
  }
  .reflex-col-md-2 {
    width: 16.666666666666664%;
    *width: 16.566666666666663%;
  }
  .reflex-col-md-1 {
    width: 8.333333333333332%;
    *width: 8.233333333333333%;
  }
}
@media (min-width: 1200px) {
  .reflex-col-lg-12 {
    width: 100%;
    *width: 99.9%;
  }
  .reflex-col-lg-11 {
    width: 91.66666666666666%;
    *width: 91.56666666666666%;
  }
  .reflex-col-lg-10 {
    width: 83.33333333333334%;
    *width: 83.23333333333335%;
  }
  .reflex-col-lg-9 {
    width: 75%;
    *width: 74.9%;
  }
  .reflex-col-lg-8 {
    width: 66.66666666666666%;
    *width: 66.56666666666666%;
  }
  .reflex-col-lg-7 {
    width: 58.333333333333336%;
    *width: 58.233333333333334%;
  }
  .reflex-col-lg-6 {
    width: 50%;
    *width: 49.9%;
  }
  .reflex-col-lg-5 {
    width: 41.66666666666667%;
    *width: 41.56666666666667%;
  }
  .reflex-col-lg-4 {
    width: 33.33333333333333%;
    *width: 33.23333333333333%;
  }
  .reflex-col-lg-3 {
    width: 25%;
    *width: 24.9%;
  }
  .reflex-col-lg-2 {
    width: 16.666666666666664%;
    *width: 16.566666666666663%;
  }
  .reflex-col-lg-1 {
    width: 8.333333333333332%;
    *width: 8.233333333333333%;
  }
}
.reflex-wrap {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.reflex-wrap-reverse {
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}
.reflex-direction-row-reverse {
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.reflex-direction-column {
  -webkit-flex-direction: column;
  flex-direction: column;
}
.reflex-direction-column-reverse {
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse;
}
.reflex-align-start {
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
.reflex-align-end {
  -webkit-align-items: flex-end;
  align-items: flex-end;
}
.reflex-align-end [class*="reflex-col-"] {
  vertical-align: bottom;
}
.reflex-align-center {
  -webkit-align-items: center;
  align-items: center;
}
.reflex-align-center [class*="reflex-col-"] {
  vertical-align: middle;
}
.reflex-align-baseline {
  -webkit-align-items: baseline;
  align-items: baseline;
}
.reflex-align-baseline [class*="reflex-col-"] {
  vertical-align: baseline;
}
.reflex-align-content-start {
  -webkit-align-content: flex-start;
  align-content: flex-start;
}
.reflex-align-content-end {
  -webkit-align-content: flex-end;
  align-content: flex-end;
}
.reflex-align-content-end [class*="reflex-col-"] {
  vertical-align: bottom;
}
.reflex-align-content-center {
  -webkit-align-content: center;
  align-content: center;
}
.reflex-align-content-space-between {
  -webkit-align-content: space-between;
  align-content: space-between;
}
.reflex-align-content-space-around {
  -webkit-align-content: space-around;
  align-content: space-around;
}
.reflex-align-self-stretch {
  -webkit-align-self: stretch;
  align-self: stretch;
}
.reflex-align-self-start {
  -webkit-align-self: flex-start;
  align-self: flex-start;
}
.reflex-align-self-end {
  -webkit-align-self: flex-end;
  align-self: flex-end;
  vertical-align: bottom;
}
.reflex-align-self-center {
  -webkit-align-self: center;
  align-self: center;
  vertical-align: middle;
}
.reflex-align-self-baseline {
  -webkit-align-self: baseline;
  align-self: baseline;
  vertical-align: baseline;
}
.reflex-justify-start {
  text-align: left;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
.reflex-justify-end {
  text-align: right;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
.reflex-justify-center {
  text-align: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.reflex-justify-space-between {
  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.reflex-justify-space-around {
  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
.reflex-item-margin-sm {
  margin: 0 0.25em 0.5em;
}
.reflex-item-margin-md {
  margin: 0 0.5em 1em;
}
.reflex-item-margin-lg {
  margin: 0 1em 2em;
}
.reflex-item-content-margin-sm * {
  margin-right: 0.25em;
  margin-left: 0.25em;
}
.reflex-item-content-margin-md * {
  margin-right: 0.5em;
  margin-left: 0.25em;
}
.reflex-item-content-margin-lg * {
  margin-right: 1em;
  margin-left: 1em;
}
.reflex-img {
  display: inline-block;
  display: -webkit-flex;
  display: flex;
  zoom: 1;
  *display: inline;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
  width: 100%;
  height: auto;
}
.reflex-item-footer {
  margin-top: auto;
  margin-left: 0;
  margin-right: 0;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="reflex-container reflex-wrap">
  <div class="reflex-col-xs-12 reflex-col-sm-4 panel" style="background-color: red">
  some content
  </div>
  <div class="reflex-col-xs-6 reflex-col-sm-4 panel" style="background-color: yellow">
  kittenz
  <img src="http://upload.wikimedia.org/wikipedia/en/1/13/Matrona.jpg">
  </div>
  <div class="reflex-col-xs-6 reflex-col-sm-4 panel" style="background-color: blue">
  some more content
  </div>
</div>


Bienvenue dans Stack Overflow! Bien que ce lien puisse répondre à la question, il est préférable d'inclure les parties essentielles de la réponse ici et de fournir le lien de référence. Les réponses de lien uniquement peuvent devenir invalides si la page liée change. Voir Comment écrire une bonne réponse .
ByteHamster

2

Voici ma méthode, j'ai utilisé flex avec quelques changements dans la requête média.

  @media (min-width: 0px) and (max-width: 767px) {
  .fsi-row-xs-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .fsi-row-sm-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .fsi-row-md-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 1200px) {
  .fsi-row-lg-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}

puis ajouté les classes nécessaires au parent.

<div class="row fsi-row-lg-level fsi-row-md-level">
<div class="col-sm-4">column 1</div>
<div class="col-sm-4">column 2</div>
<div class="col-sm-4">column 3</div>
</div>

J'utilise des points d'arrêt réactifs car le flux entrave généralement la nature réactive standard du bootstrap.


2

J'utilise cette solution super facile avec clearfix, qui n'a aucun effet secondaire.

Voici un exemple sur AngularJS:

<div ng-repeat-start="item in list">
    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>
</div>
<div ng-repeat-end>
    <div ng-if="$index % 3 == 2" class="clearfix visible-lg"></div>
    <div ng-if="$index % 2 == 1" class="clearfix visible-md"></div>
</div>

Et encore un exemple sur PHP:

<?php foreach ($list as $i => $item): ?>
    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>
    <div class="clearfix visible-md"></div>
    <?php if ($i % 2 === 1): ?>
        <div class="clearfix visible-lg"></div>
    <?php endif; ?>
<?php endforeach; ?>

Cependant, cela ne rend pas toutes vos colonnes à la même hauteur.
skerit du

1
Pour moi, vouloir avoir des colonnes à la même hauteur / place en ligne c'est une solution
Michal - wereda-net

2

Pour ceux qui recherchent une solution rapide et facile - si vous avez un ensemble de contenu de bloc relativement cohérent, définir une hauteur minimale sur la div qui est un peu plus grande que le plus grand bloc peut être plus facile à mettre en œuvre.

.align-box {
    min-height: 400px;
}

2

.row.container-height {
	overflow: hidden; 
}

.row.container-height > [class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

où .container-height est la classe de style qui doit être ajoutée à un élément de style .row auquel tous ses enfants .col * ont la même hauteur.

L'application de ces styles uniquement à certains .row spécifiques (avec .container-height, comme dans l'exemple) évite également d'appliquer la marge et le dépassement de remplissage à tous les .col *.


2

J'ai cherché une solution au même problème et j'en ai trouvé une qui fonctionnait !! - avec presque pas de code supplémentaire ..

voir https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27 pour une bonne disuccuion, et avec la resposne que vous voulez en bas, avec un lien.

https://www.codeply.com/go/EskIjvun4B

c'était la bonne façon de réagir pour moi ... un devis: ... 3 - Utilisez flexbox (le meilleur!)

Depuis 2017, la meilleure (et la plus simple) façon de créer des colonnes de hauteur égale dans une conception réactive consiste à utiliser CSS3 flexbox.

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

et utilisez simplement:

div class="container">
   <div class="row display-flex .... etc..

1
@media (min-width: @screen-sm-min) {
    div.equal-height-sm {
        display: table;


        > div[class^='col-'] {
            display: table-cell;
            float: none;
            vertical-align: top;
        }
    }
}

<div class="equal-height-sm">
    <div class="col-xs-12 col-sm-7">Test<br/>Test<br/>Test</div>
    <div class="col-xs-12 col-sm-5">Test</div>
</div>

Exemple:

https://jsfiddle.net/b9chris/njcnex83/embedded/result/

Adapté de plusieurs réponses ici. Les réponses basées sur la flexbox sont la bonne façon une fois qu'IE8 et 9 sont morts, et qu'une fois Android 2.x est mort, mais ce n'est pas vrai en 2015, et ce ne sera probablement pas le cas en 2016. IE8 et 9 constituent toujours 4- 6% d'utilisation selon la façon dont vous mesurez, et pour de nombreux utilisateurs d'entreprise, c'est bien pire. http://caniuse.com/#feat=flexbox

La display: table, display: table-cellastuce est plus rétrocompatible - et une grande chose est le seul problème de compatibilité grave est un problème Safari où elle forces box-sizing: border-box, quelque chose déjà appliqué à vos balises Bootstrap. http://caniuse.com/#feat=css-table

Vous pouvez évidemment ajouter plus de classes qui font des choses similaires, comme .equal-height-md. Je les ai liés aux divs pour le petit avantage de performance dans mon utilisation contrainte, mais vous pouvez supprimer la balise pour la rendre plus généralisée comme le reste de Bootstrap.

Notez que jsfiddle utilise ici CSS, et donc, les choses que Less fournirait autrement sont codées en dur dans l'exemple lié. Par exemple, @ screen-sm-min a été remplacé par ce que Less insérerait - 768px.


1

Si cela a du sens dans votre contexte, vous pouvez simplement ajouter un div vide de 12 colonnes après chaque pause, qui agit comme un séparateur qui épouse le bas de la cellule la plus haute de votre ligne.

<div class="row">
   <div class="col-xs-6">Some content</div>
   <div class="col-xs-6">
      Lots of content! Lots of content! Lots of content! Lots of content! Lots of content! 
   </div>
   <div id="spacer-div" class="col-xs-12"></div>
   <div class="col-xs-6">More content...</div>
</div><!--this You forgot to close -->

J'espère que cela t'aides!


Cela ne répond pas à la question qu'il a posée!
Ellisan

0

Je pensais simplement ajouter que la réponse donnée par Dr.Flink peut également être appliquée à un form-horizontalbloc Bootstrap 3 - ce qui peut être très pratique si vous souhaitez utiliser des couleurs d'arrière-plan pour chaque cellule. Pour que cela fonctionne pour les formulaires d'amorçage, vous devez envelopper le contenu du formulaire qui sert simplement à répliquer une structure de type tableau.

L'exemple ci-dessous fournit également le CSS qui démontre qu'une requête multimédia supplémentaire permet à Bootstrap 3 de simplement prendre le contrôle et de faire sa chose normale sur les écrans les plus petits. Cela fonctionne également dans IE8 +.

Exemple:

<form class="form-horizontal" role="form">

  <div class="form-wrapper">
    <div class="form-group">
      <label class="col-xs-12 col-sm-2 control-label">My Label</label>
      <div class="col-xs-12 col-sm-10">
        Some content
      </div>
    </div>
  </div>

</form>
.form-wrapper {
  display: table;
}

.form-wrapper .form-group {
  display: table-row;
}

.form-wrapper .form-group .control-label {
  display: table-cell;
  float: none;
}

.form-wrapper .form-group label + div {
  display: table-cell;
  float: none;
}

@media (max-width: 768px) {
  .form-wrapper {
    display: inherit;
  }
  .form-wrapper .form-group {
    display: block;
  }
  .form-wrapper .form-group .control-label {
    display: inherit;
  }
  .form-wrapper .form-group label + div {
    display: inherit;
  }
}

0

Essayez ceci avec Flex-Box

.container {
	display: flex;
	padding-bottom: 50px;
}
.col {
	background: blue;
	padding: 30px;
}

.col.center {
	background: red;
	height: 100px;
	margin-bottom: -50px;
}
<div class="container">
  <div class="col">Left</div>
  <div class="col center">Center</div>
  <div class="col">Right</div>
</div>

Live JSFiddle - https://jsfiddle.net/grinmax_/spsn4fnq/


0

Donc oui, Bootstrap 4 fait que tous les cols d'une ligne sont de hauteur égale, mais si vous créez une bordure autour du contenu à l'intérieur de la ligne, vous constaterez peut-être que les cols ne sont pas de hauteur égale!

Lorsque j'ai appliqué height: 100%à l'élément à l'intérieur du col, j'ai constaté que j'avais perdu ma marge.

Ma solution est d'utiliser un remplissage sur le div du col (au lieu d'une marge sur l'élément interne). Ainsi:

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
    </div>
</div>

L'exemple de code ci-dessus utilise Bootstrap 4.1 pour créer un ensemble de neuf boîtes avec une bordure


0

HTML

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span4 option2">
            <p>left column </p>
            <p>The first column has to be the longest The first column has to be the longes</p>
        </div>

        <div class="span4 option2">
            <p>middle column</p>
        </div>

        <div class="span4 option2">
            <p>right column </p>
            <p>right column </p>
            <p>right column </p>
            <p>right column </p>
            <p>right column </p>
        </div>
    </div>
</div>

CSS

.option2 { background: red; border: black 1px solid; color: white; }

JS

$('.option2').css({
    'height': $('.option2').height()
});

0

19/03/2019

** Solution Bootstrap 4 à hauteur égale **

Utilitaires Bootstrap / flex pour une hauteur égale

Exemple en direct à Codepen

Hauteur égale par classe bootstrap avec parent div fixe heightoumin-height

<div class="d-flex align-content-stretch flex-wrap" style="min-height: 200px">
    <div>Flex height test text for example , Flex height test text for example </div>
    <div>Flex item</div>
    <div>Flex item</div>
    <div>Flex item</div>
 </div>


3
Pourquoi vous me donnez un vote négatif. pouvez-vous faire un commentaire à ce sujet?
MD Ashik

-1

Vous pouvez envelopper les colonnes dans un div

<div class="row">
<div class="col-md-12>
  <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>
</div>

N'a pas fonctionné pour moi avec un bouton dans l'une des colonnes.
Ray Hunter
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.