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

Question

Je suis en utilisant Bootstrap. Comment puis-je faire trois colonnes de même hauteur? J'ai essayé tout ce que je pense, et la lecture de la question après question sur StackOverflow, et je suis nulle part.

Voici une capture d'écran du problème - j'aimerais que le bleu et le rouge colonnes à la même hauteur que le jaune de la colonne.

Voici le code:

<div class="row">
  <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>

Ici, il est sur Bootply: http://bootply.com/91053

Answer 1

Aucun d'entre eux sont parfaits, mais ils ne fonctionnent pas.

Solution 1

http://jsfiddle.net/nV3Ua/2/

Solution 2

http://bootply.com/112728

Answer 2

Il y a une autre approche simple--à l’aide de CSS flexbox (ce qui nécessite un minimum balisage CSS)...

http://bootply.com/127827

Answer 3

Vous montrer seulement une ligne donc votre cas d’utilisation peut se limiter à cela. Juste au cas où vous avez plusieurs lignes, ce plugin - https://github.com/Sam152/Javascript-Grids - fonctionne parfaitement ! Il rend chaque panneau élargir au plus grand panneau, chaque ligne donnant potentiellement une hauteur différente, basée sur le tableau plus haut dans la même rangée. C’est une solution de jquery vs css, mais voulu le recommander comme approche alternative.

Answer 4

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

Pour mon projet, j’ai voulu tous les rangs qui a des éléments enfants frontières pour avoir la même hauteur afin que les frontières se présenterait en escalier. Pour cela, j’ai créé une classe css simple.

Answer 5

S’il vous plaît vérifier la suivante ans. http://stackoverflow.com/a/25012280

Bootstrap 3 solution. Si vous utilisez Bootstrap 2 + vous pouvez toujours utiliser le css fourni dans la réponse

Espérons que cela aide u