Honteusement pompé de Bootstrap 3 responsive centered columns. Demo en ligne (toujours sur le site de l’auteur original) : Demo.
Une solution simple à mettre en place pour centrer horizontalement des colonnes multiples dans Bootstrap 3 (également valable pour supports mobile).
Ze problème
Il peut arriver que vous souhaitiez centrer horizontalement des colonnes Bootstrap, en général lorsque le nombre de ces dernières est impair, ou lorsque vous leur assignez une max-width et qu’elles ne remplissent pas la rangée row qui les contient.
Ze solution
|
1 2 3 4 5 6 7 8 9 |
<div class="container"> <div class="row row-centered"> <div class="col-xs-6 col-centered"></div> <div class="col-xs-6 col-centered"></div> <div class="col-xs-3 col-centered"></div> <div class="col-xs-3 col-centered"></div> <div class="col-xs-3 col-centered"></div> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* centered columns styles */ .row-centered { text-align:center; } .col-centered { display:inline-block; float:none; /* reset the text-align */ text-align:left; /* inline-block space fix */ margin-right:-4px; } |
Vous pouvez aussi assigner une min-width, une max-width ou une largeur fixe aux colonnes.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.col-fixed { /* custom width */ width:320px; } .col-min { /* custom min width */ min-width:320px; } .col-max { /* custom max width */ max-width:320px; } |