Cinq colonnes égales sur twitter bootstrap
je veux avoir 5 colonnes égales sur une page que je suis en train de construire et je n'arrive pas à comprendre comment la grille de 5 colonnes est utilisée ici: http://web.archive.org/web/20120416024539/http://domain7.com/mobile/tools/bootstrap/responsive
est-ce que la grille de cinq colonnes est montrée au-dessus du cadre de bootstrap twitter?
30 réponses
utilisez cinq divs avec une classe de span2 et donnez la première classe de offset1.
<div class="row-fluid">
<div class="span2 offset1"></div>
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
</div>
voilà! Cinq colonnes également espacées et centrées.
dans bootstrap 3.0, ce code ressemblerait à
<div class="row">
<div class="col-md-2 col-md-offset-1"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
pour Bootstrap 3 et plus
fantastique pleine largeur 5 colonnes de mise en page avec Twitter Bootstrap a été créé ici .
c'est de loin la solution la plus avancée puisqu'elle fonctionne parfaitement avec Bootstrap 3. Il vous permet de réutiliser les classes encore et encore, en tandem avec les classes Bootstrap actuelles pour le design responsive.
CSS:
Ajoutez ceci à votre feuille de style globale, ou même au bas de votre document bootstrap.css .
.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-5ths {
width: 20%;
float: left;
}
@media (min-width: 768px) {
.col-sm-5ths {
width: 20%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-5ths {
width: 20%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-5ths {
width: 20%;
float: left;
}
}
utilisez-le!
par exemple, si vous voulez créer un élément div qui se comporte comme une disposition de cinq colonnes sur les écrans moyens et comme deux colonnes sur les plus petits, vous avez juste besoin d'utiliser quelque chose comme ceci:
<div class="row">
<div class="col-md-5ths col-xs-6">
...
</div>
</div>
démo de travail - étendez le cadre pour voir les colonnes devenir responsive.
ANOTHER DEMO - incorporant les nouvelles classes col-*-5ths avec d'autres comme col-*-3 et col-*-2 . Redimensionnez le cadre pour les voir changer en col-xs-6 en vue responsive.
Pour Bootstrap 4
Bootstrap 4 utilise maintenant flexbox par défaut, vous obtenez l'accès à ses pouvoirs magiques tout droit sorti de la boîte. Consultez les colonnes de mise en page automatique qui ajustent dynamiquement la largeur en fonction du nombre de colonnes imbriquées.
voici un exemple:
<div class="row">
<div class="col">
1 of 5
</div>
<div class="col">
2 of 5
</div>
<div class="col">
3 of 5
</div>
<div class="col">
4 of 5
</div>
<div class="col">
5 of 5
</div>
</div>
Pour Bootstrap 3 , si vous voulez pleine largeur et utilisez LESS , SASS , ou quelque chose de similaire, vous avez à faire est de faire usage de Bootstrap du mixin fonctions make-md-column , make-sm-column , etc.
moins:
.col-lg-2-4{
.make-lg-column(2.4)
}
.col-md-2-4{
.make-md-column(2.4)
}
.col-sm-2-4{
.make-sm-column(2.4)
}
SASS:
.col-lg-2-4{
@include make-lg-column(2.4)
}
.col-md-2-4{
@include make-md-column(2.4)
}
.col-sm-2-4{
@include make-sm-column(2.4)
}
non seulement pouvez-vous construire vrai bootstrap pleine largeur colonne classes en utilisant ces mixins, mais vous pouvez aussi construire toutes les classes connexes helper classes comme .col-md-push-* , .col-md-pull-* , et .col-md-offset-* :
moins:
.col-md-push-2-4{
.make-md-column-push(2.4)
}
.col-md-pull-2-4{
.make-md-column-pull(2.4)
}
.col-md-offset-2-4{
.make-md-column-offset(2.4)
}
SASS:
.col-md-push-2-4{
@include make-md-column-push(2.4)
}
.col-md-pull-2-4{
@include make-md-column-pull(2.4)
}
.col-md-offset-2-4{
@include make-md-column-offset(2.4)
}
D'autres réponses parlent de définir @gridColumns qui est parfaitement valide, mais qui change la largeur de la colonne de base pour tout bootstrap. En utilisant les fonctions de mixin ci-dessus ajoutera 5 la disposition de la colonne au-dessus des colonnes de bootstrap par défaut, de sorte qu'elle ne cassera aucun outil tiers ou style existant.
ci-dessous est un combo de réponses @machineaddict et @Mafnah, réécrit pour Bootstrap 3 (qui fonctionne bien pour moi jusqu'à présent):
@media (min-width: 768px){
.fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
width: 20%;
*width: 20%;
}
}
@media (min-width: 1200px) {
.fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
width: 20%;
*width: 20%;
}
}
@media (min-width: 768px) and (max-width: 979px) {
.fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
width: 20%;
*width: 20%;
}
}
gardez le bootstrap original avec 12 colonnes, ne le Personnalisez pas. La seule modification que vous devez faire est un CSS après le CSS Bootstrap responsive original, comme ceci:
le code suivant a été testé pour Bootstrap 2.3.2:
<style type="text/css">
/* start of modification for 5 columns */
@media (min-width: 768px){
.fivecolumns .span2 {
width: 18.297872340425532%;
*width: 18.2234042553191494%;
}
}
@media (min-width: 1200px) {
.fivecolumns .span2 {
width: 17.9487179487179488%;
*width: 17.87424986361156592%;
}
}
@media (min-width: 768px) and (max-width: 979px) {
.fivecolumns .span2 {
width: 17.79005524861878448%;
*width: 17.7155871635124022%;
}
}
/* end of modification for 5 columns */
</style>
et le html:
<div class="row-fluid fivecolumns">
<div class="span2">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span2">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span2">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span2">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span2">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
Note: bien que le span2 fois 5 n'égale pas 12 colonnes, vous obtenez l'idée :)
un exemple de travail peut être trouvé ici http://jsfiddle.net/v3Uy5/6 /
mise à jour 2018
Bootstrap 4.0
Voici 5 colonnes égales, pleine largeur ( pas de CSS ou SASS supplémentaire ) utilisant la grille d'auto-disposition :
<div class="container-fluid">
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
</div>
</div>
http://www.codeply.com/go/MJTglTsq9h
Cette solution fonctionne parce que Bootstrap 4 est maintenant flexbox. Vous pouvez obtenir les 5 columns à envelopper dans le même .row en utilisant une rupture de clearfix comme <div class="col-12"></div> ou <div class="w-100"></div> toutes les 5 colonnes.
Voir aussi: Bootstrap-5 colonne layout
créer un téléchargement Bootstrap personnalisé pour la mise en page de 5 colonnes
passer à Bootstrap 2.3.2 (ou Bootstrap 3 ) page de personnalisation et définir les variables suivantes (ne pas entrer de point-virgule):
@gridColumns: 5;
@gridColumnWidth: 172px;
@gridColumnWidth1200: 210px;
@gridColumnWidth768: 128px;
@gridGutterWidth768: 21px;
Téléchargez votre build. Cette grille s'insérerait dans les conteneurs par défaut, en préservant les largeurs de gouttière par défaut (presque).
Note: si vous utilisez moins de, mettez à jour variables.less à la place.
dans le cas où vous n'avez pas besoin de la exacte même largeur de colonnes, vous pouvez essayer de créer 5-colonnes en utilisant la nidification:
<div class="container">
<div class="row">
<div class="col-xs-5">
<div class="row">
<div class="col-xs-6 column">Column 1</div>
<div class="col-xs-6 column">Column 2</div>
</div>
</div>
<div class="col-xs-7">
<div class="row">
<div class="col-xs-4 column">Column 3</div>
<div class="col-xs-4 column">Column 4</div>
<div class="col-xs-4 column">Column 5</div>
</div>
</div>
</div>
</div>
les deux premières colonnes auront une largeur égale 5/12 * 1/2 ~ 20.83%
les trois dernières colonnes: 7/12 * 1/3 ~ 19.44%
un tel piratage donne le résultat acceptable dans de nombreux cas et ne nécessite pas de modifications CSS (nous n'utilisons que les classes natives bootstrap).
avec flexbox http://output.jsbin.com/juziwu
.flexrow {
display: flex;
background: lightgray; /*for debug*/
}
.flexrow > * {
flex: 1;
margin: 1em;
outline: auto green;
}<div class="flexrow">
<div>...</div>
<div>...</div>
<div>...</div>
<div>...<br>..</div>
<div>...</div>
</div>J'ai voté la réponse de Mafnah mais en regardant cela encore je suggérerais ce qui suit est mieux si vous gardez les marges par défaut, etc.
<div class="equal row-fluid">
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
</div>
.equal .span2 {
width: 17.9%;
}
<div class="equal row-fluid">
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
</div>
.equal .span2 {
width: 20%;
}
créer 5 éléments avec la classe col-sm-2 et ajouter au premier élément aussi la classe col-sm-offset-1
P. S. ce ne sera pas la pleine largeur (il sera légèrement indenté de la droite et de la gauche de l'écran)
le code devrait ressembler à quelque chose comme ça
<div class="col-sm-2 col-sm-offset-1"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
une autre façon d'activer 5 colonnes dans Bootstrap 3 est de modifier le format de 12 colonnes utilisé par défaut par Bootstrap. Et ensuite créer une grille de 20 colonnes (utiliser personnaliser sur le site Bootstrap ou utiliser la version LESS/SASS).
pour personnaliser sur le site de bootstrap, allez à personnaliser et télécharger page, Mettre à jour la variable @grid-columns de 12 à 20 . Ensuite, vous serez en mesure de créer 4 et 5 colonnes.
il peut être fait avec la nidification et en utilisant un peu CSS OVER-ride.
<div class="col-sm-12">
<div class="row">
<div class="col-sm-7 five-three">
<div class="row">
<div class="col-sm-4">
Column 1
</div>
<div class="col-sm-4">
Column 2
</div>
<div class="col-sm-4">
Column 3
</div><!-- end inner row -->
</div>
</div>
<div class="col-sm-5 five-two">
<div class="row">
<div class="col-sm-6">
Col 4
</div>
<div class="col-sm-6">
Col 5
</div>
</div><!-- end inner row -->
</div>
</div><!-- end outer row -->
puis quelques css
@media (min-width: 768px) {
div.col-sm-7.five-three {
width: 60% !important;
}
div.col-sm-5.five-two {
width: 40% !important;
}
}
voici un exemple: 5 colonne égale exemple
Et voici mon écriture sur coderwall
À mon avis, il est préférable de l'utiliser comme ceci avec Moins de syntaxe. Cette réponse est basée sur la réponse de @fizzix
de cette façon, les colonnes utilisent les variables (@grid-gutter-width, media breakpoints) que l'utilisateur peut avoir outrepassé et le comportement de cinq colonnes correspond avec le comportement de 12 colonnes de grille.
/*
* Special grid for ten columns,
* using its own scope
* so it does not interfere with the rest of the code
*/
& {
@import (multiple) "../bootstrap-3.2.0/less/variables.less";
@grid-columns: 5;
@import (multiple) "../bootstrap-3.2.0/less/mixins.less";
@column: 1;
.col-xs-5ths {
.make-xs-column(@column);
}
.col-sm-5ths {
.make-sm-column(@column);
}
.col-md-5ths {
.make-md-column(@column);
}
.col-lg-5ths {
.make-lg-column(@column);
}
}
/***************************************/
/* Using default bootstrap now
/***************************************/
@import (multiple) "../bootstrap-3.2.0/less/variables.less";
@import (multiple) "../bootstrap-3.2.0/less/mixins.less";
/* ... your normal less definitions */
c'est génial: http://www.ianmccullough.net/5-column-bootstrap-layout /
Just do:
<div class="col-xs-2 col-xs-15">
et CSS:
.col-xs-15{
width:20%;
}
par défaut Bootstrap ne fournit pas le système de grille qui nous permet de créer la disposition de cinq colonnes, vous devez créer la définition de colonne par défaut de la manière que Bootstrap faire créez des classes personnalisées et des requêtes médias dans votre fichier css
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
}
.col-xs-15 {
width: 20%;
float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
width: 20%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-15 {
width: 20%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-15 {
width: 20%;
float: left;
}
}
et un peu de code html
<div class="row">
<div class="col-md-15 col-sm-3">
...
</div>
</div>
une solution qui ne nécessite pas beaucoup de CSS, ni de peaufinage bootstrap par défaut 12col layout:
http://jsfiddle.net/0ufdyeur/1 /
HTML:
<div class="stretch">
<div class="col-lg-2"></div>
<div class="col-lg-2"></div>
<div class="col-lg-2"></div>
<div class="col-lg-2"></div>
<div class="col-lg-2"></div>
</div>
CSS:
@media (min-width: 1200px) { /*if not lg, change this criteria*/
.stretch{
width: 120%; /*the actual trick*/
}
}
Dans le bootstrap 3, je pense que nous pouvons faire quelque chose comme ça, pour supprimer les marges gauche et droite :
<div class="row this_row">
<div class="col-md-2 col-md-offset-1"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
et CSS
.this_row {
margin: 0 -5%;
}
comment ajouter 5 colonnes de grille dans bootstrap
.col-lg-1-5,.col-md-1-5,.col-sm-1-5,.col-xs-1-5{min-height:1px;padding-left:15px;padding-right:15px;position:relative; width:100%;box-sizing:border-box;}
.item{width:100%;height:100px; background-color:#cfcfcf;}
.col-xs-1-5{width: 20%;float:left;} }
@media (min-width: 767px){ .col-sm-1-5{width: 20%;float:left;} }
@media (min-width: 992px){ .col-md-1-5{width: 20%;float:left;} }
@media (min-width: 1200px){ .col-lg-1-5{width: 20%;float:left;} }<div class="row">
<div class="col-sm-1-5">
<div class="item">Item 1</div>
</div>
<div class="col-sm-1-5">
<div class="item">Item 2</div>
</div>
<div class="col-sm-1-5">
<div class="item">Item 3</div>
</div>
<div class="col-sm-1-5">
<div class="item">Item 4</div>
</div>
<div class="col-sm-1-5">
<div class="item">Item 5</div>
</div>
</div>Bootstrap par défaut peut passer à 12 colonnes? Cela signifie que si nous voulons créer une mise en page de 12 colonnes de largeur égale, nous écririons à l'intérieur de la classe div="col-md-1" douze fois.
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-2">1</div>
<div class="col-md-2">2</div>
<div class="col-md-2">3</div>
<div class="col-md-2">4</div>
<div class="col-md-2">5</div>
<div class="col-md-1"></div>
</div>
la solution la plus simple sans devoir éditer CSS serait:
<div class="row">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<div class="col-sm-12">Column 1</div>
</div>
<div class="btn-group">
<div class="col-sm-12">Column 2</div>
</div>
<div class="btn-group">
<div class="col-sm-12">Column 3</div>
</div>
<div class="btn-group">
<div class="col-sm-12">Column 4</div>
</div>
<div class="btn-group">
<div class="col-sm-12">Column 5</div>
</div>
</div>
</div>
et si vous avez besoin de ceux-ci pour briser au-delà de n'importe quel point de rupture, faites juste le bloc de groupe btn. Espérons que cela aide quelqu'un.
cinq colonnes ne font manifestement pas partie de bootstrap de par leur conception.
mais avec Bootstrap v4 (alpha), il y a 2 choses à faire avec une disposition de grille compliquée
- Flex ( http://v4-alpha.getbootstrap.com/getting-started/flexbox / ), le nouveau type d'élément (officiel - https://www.w3.org/TR/css-flexbox-1 / )
- Responsive services publics ( http://v4-alpha.getbootstrap.com/layout/responsive-utilities / )
en termes simples, j'utilise
<style>
.flexc { display: flex; align-items: center; padding: 0; justify-content: center; }
.flexc a { display: block; flex: auto; text-align: center; flex-basis: 0; }
</style>
<div class="container flexc hidden-sm-down">
<!-- content to show in MD and larger viewport -->
<a href="#">Link/Col 1</a>
<a href="#">Link/Col 2</a>
<a href="#">Link/Col 3</a>
<a href="#">Link/Col 4</a>
<a href="#">Link/Col 5</a>
</div>
<div class="container hidden-md-up">
<!-- content to show in SM and smaller viewport, I don't think 5 cols in smaller viewport are gonna be alright :) -->
</div>
que ce soit 5,7,9,11,13 ou un truc du genre, ça ira. Je suis tout à fait sûr que la norme 12-grids est capable de servir plus de 90% de cas d'utilisation - donc concevons de cette façon - développer plus facile aussi!
le tutoriel de nice flex est ici " https://css-tricks.com/snippets/css/a-guide-to-flexbox / "
j'ai créé des définitions Sass mixin basées sur les définitions bootstrap pour n'importe quel nombre de colonnes (personnellement à côté de 12 j'utilise 8, 10 et 24):
// Extended bootstrap grid system
//
// Framework grid generation
//
// Based on Bootstrap 'bootstrap/_grid-framework.scss'. Generates classes in form of `.col-(size)-x-num` of width x/num.
@mixin make-extended-grid-columns($num-columns, $i: 1, $list: ".col-xs-#{$i}-#{$num-columns}, .col-sm-#{$i}-#{$num-columns}, .col-md-#{$i}-#{$num-columns}, .col-lg-#{$i}-#{$num-columns}") {
@for $i from (1 + 1) through $num-columns {
$list: "#{$list}, .col-xs-#{$i}-#{$num-columns}, .col-sm-#{$i}-#{$num-columns}, .col-md-#{$i}-#{$num-columns}, .col-lg-#{$i}-#{$num-columns}";
}
#{$list} {
position: relative;
min-height: 1px;
padding-left: ($grid-gutter-width / 2);
padding-right: ($grid-gutter-width / 2);
}
}
@mixin float-extended-grid-columns($class, $num-columns, $i: 1, $list: ".col-#{$class}-#{$i}-#{$num-columns}") {
@for $i from (1 + 1) through $num-columns {
$list: "#{$list}, .col-#{$class}-#{$i}-#{$num-columns}";
}
#{$list} {
float: left;
}
}
@mixin calc-extended-grid-column($index, $num-columns, $class, $type) {
@if ($type == width) and ($index > 0) {
.col-#{$class}-#{$index}-#{$num-columns} {
width: percentage(($index / $num-columns));
}
}
@if ($type == push) and ($index > 0) {
.col-#{$class}-push-#{$index}-#{$num-columns} {
left: percentage(($index / $num-columns));
}
}
@if ($type == pull) and ($index > 0) {
.col-#{$class}-pull-#{$index}-#{$num-columns} {
right: percentage(($index / $num-columns));
}
}
@if ($type == offset) and ($index > 0) {
.col-#{$class}-offset-#{$index}-#{$num-columns} {
margin-left: percentage(($index / $num-columns));
}
}
}
@mixin loop-extended-grid-columns($num-columns, $class, $type) {
@for $i from 1 through $num-columns - 1 {
@include calc-extended-grid-column($i, $num-columns, $class, $type);
}
}
@mixin make-extended-grid($class, $num-columns) {
@include float-extended-grid-columns($class, $num-columns);
@include loop-extended-grid-columns($num-columns, $class, width);
@include loop-extended-grid-columns($num-columns, $class, pull);
@include loop-extended-grid-columns($num-columns, $class, push);
@include loop-extended-grid-columns($num-columns, $class, offset);
}
et vous pouvez simplement créer des classes par:
$possible-number-extended-grid-columns: 8, 10, 24;
@each $num-columns in $possible-number-extended-grid-columns {
// Columns
@include make-extended-grid-columns($num-columns);
// Extra small grid
@include make-extended-grid(xs, $num-columns);
// Small grid
@media (min-width: $screen-sm-min) {
@include make-extended-grid(sm, $num-columns);
}
// Medium grid
@media (min-width: $screen-md-min) {
@include make-extended-grid(md, $num-columns);
}
// Large grid
@media (min-width: $screen-lg-min) {
@include make-extended-grid(lg, $num-columns);
}
}
j'espère que quelqu'un va trouver utile
5 mise en page des colonnes avec le style Bootstrap de Twitter
.col-xs-15 {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
}
.col-xs-15 {
width: 100%;
float: left;
}
@media (min-width: 768px) {
.col-xs-15 {
width: 50%;
float: left;
}
}
@media (min-width: 992px) {
.col-xs-15 {
width: 20%;
float: left;
}
}
@media (min-width: 1200px) {
.col-xs-15 {
width: 20%;
float: left;
}
}
il suffit de créer une nouvelle classe et de définir son comportement pour chaque requête multimédia selon les besoins
@media(min-width: 768px){
.col-1-5{
width: 20%;
float: left;
position: relative;
min-height: 1px;
padding-right: 5px;
padding-left: 5px;
}
}
<div class="container-fluid">
<div class="row">
<div class="col-1-5">col 1</div>
<div class="col-1-5">col 2</div>
<div class="col-1-5">col 3</div>
<div class="col-1-5">col 4</div>
<div class="col-1-5">col 5</div>
</div>
</div>
voici une démo de travail https://codepen.io/giorgosk/pen/BRVorW
Bootstrap 4, nombre variable de colonnes par rangée
si vous voulez avoir jusqu'à cinq colonnes par rangée, de sorte que moins de nombres de colonnes prennent encore seulement 1 / 5ème de la rangée chacun, la solution est d'utiliser Bootstrap 4 mixins :
SCSS:
.col-2-4 {
@include make-col-ready(); // apply standard column margins, padding, etc.
@include make-col(2.4); // 12/5 = 2.4
}
HTML:
<div class="container">
<div class="row">
<div class="col-2-4">1 of 5</div>
<div class="col-2-4">2 of 5</div>
<div class="col-2-4">3 of 5</div>
<div class="col-2-4">4 of 5</div>
<div class="col-2-4">5 of 5</div>
</div>
<div class="row">
<div class="col-2-4">1 of 2</div> <!-- same width as column "1 of 5" above -->
<div class="col-2-4">2 of 2</div> <!-- same width as column "2 of 5" above -->
</div>
</div>
est quelqu'un utilise bootstrap-sass (v3), voici le code simple pour 5 colonnes en utilisant Bootstrap mixings:
.col-xs-5ths {
@include make-xs-column(2.4);
}
@media (min-width: $screen-sm-min) {
.col-sm-5ths {
@include make-sm-column(2.4);
}
}
@media (min-width: $screen-md-min) {
.col-md-5ths {
@include make-md-column(2.4);
}
}
@media (min-width: $screen-lg-min) {
.col-lg-5ths {
@include make-lg-column(2.4);
}
}
assurez-vous d'avoir inclus:
@import "bootstrap/variables";
@import "bootstrap/mixins";
.col-xs-2-4 {
position: relative;
float: left;
width: 20%;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
.col-sm-2-4 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 768px) {
.col-sm-2-4 {
float: left;
width: 20%;
}
}
.col-md-2-4 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 992px) {
.col-md-2-4 {
float: left;
width: 20%;
}
}
.col-lg-2-4 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 1200px) {
.col-lg-2-4 {
float: left;
width: 20%;
}
}Pour twitter bootstrap 3 c'est le moyen le plus simple d'y parvenir:
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">