web-dev-qa-db-fra.com

Faire des colonnes de la même hauteur dans le bootstrap

J'ai trois colonnes dans une rangée. Je veux que les trois colonnes aient la même hauteur (remplissez tout l'espace blanc)

Actuellement, cela ressemble à ceci:

enter image description here

Comme vous pouvez le constater, la colonne de gauche correspond à la hauteur correcte. Où le milieu et la droite ne sont pas.

L'échafaudage ressemble à ceci:

<div class="container">
    <div class="row">
    <div class="span3">
      -- menu --
    </div>
    <div class="span5">
     -- gray content --
    </div>
    <div class="span3">
     -- black content--
    </div>
    </div>
</div>

J'ai essayé de donner la hauteur de milieu et de droite de 100%, mais ça ne le fait pas. Quelqu'un peut-il me guider dans la bonne direction?

J'utilise la dernière version de Twitter Bootstrap

jquerycsstwitter-bootstrap
10
oliverbj

Vous pouvez résoudre ce problème sans JS. Utilisez simplement

bottom: 0;
top: 0;
position: absolute; /* The container must have position: relative */

C'est magique :)

Un exemple que j'ai fait: http://fiddle.jshell.net/E8SK6/1

Résultat: http://fiddle.jshell.net/E8SK6/1/show/

Modifier :

Comme vous avez dit dans un commentaire que le menu est toujours le plus grand, vous pouvez utiliser ce nouvel exemple: http://fiddle.jshell.net/E8SK6/5/

Si vous ne savez pas lequel d’entre eux est le plus long, peut-être que la réponse sur ce fil est préférable. Il utilise display: table-cell. Ici est l'exemple

12
Itay

J'ai trouvé cette solution pour bootstrap 3 qui fonctionne très bien pour moi

http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height

Il utilise ces styles:

/* columns of same height styles */
.container-xs-height {
    display:table;
    padding-left:0px;
    padding-right:0px;
}
.row-xs-height {
    display:table-row;
}
.col-xs-height {
    display:table-cell;
    float:none;
}
@media (min-width: 768px) {
    .container-sm-height {
        display:table;
        padding-left:0px;
        padding-right:0px;
    }
    .row-sm-height {
        display:table-row;
    }
    .col-sm-height {
        display:table-cell;
        float:none;
    }
}
@media (min-width: 992px) {
    .container-md-height {
        display:table;
        padding-left:0px;
        padding-right:0px;
    }
    .row-md-height {
        display:table-row;
    }
    .col-md-height {
        display:table-cell;
        float:none;
    }
}
@media (min-width: 1200px) {
    .container-lg-height {
        display:table;
        padding-left:0px;
        padding-right:0px;
    }
    .row-lg-height {
        display:table-row;
    }
    .col-lg-height {
        display:table-cell;
        float:none;
    }
}
/* vertical alignment styles */
.col-top {
    vertical-align:top;
}
.col-middle {
    vertical-align:middle;
}
.col-bottom {
    vertical-align:bottom;
}

Et ce balisage

<div class="container container-xs-height">
    <div class="row row-xs-height">
        <div class="col-xs-6 col-xs-height"></div>
        <div class="col-xs-3 col-xs-height col-top"></div>
        <div class="col-xs-2 col-xs-height col-middle"></div>
        <div class="col-xs-1 col-xs-height col-bottom"></div>
    </div>
</div>
19
Maurizio Pozzobon

Ah c'est un problème séculaire.

Si vous définissez une hauteur de 100% sur un élément, son parent a besoin d'une hauteur définie pour pouvoir être éteint. Puisque le div.row a une hauteur fluide, cela ne fonctionnera pas.

La solution serait la suivante:

Définissez une hauteur fixe sur le div.row (probablement pas une bonne idée si vous voulez une conception fluide)

ou 

Utilisez jQuery pour le faire:

HTML

<div class="row equalHeight">
    <div class="span3">
      -- menu --
    </div>
    <div class="span5">
     -- gray content --
    </div>
    <div class="span3">
     -- black content--
    </div>
</div>

jQuery

$('.equalHeight').each(function() {
  var eHeight = $(this).innerHeight();

  $(this).find('div').outerHeight(eHeight);
});
2
Coop

Aujourd'hui, c'est possible avec row-eq-height

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

0
candlejack