Cinq colonnes égales dans Twitter Bootstrap

361

Je veux avoir 5 colonnes égales sur une page que je construis et je n'arrive pas à comprendre comment la grille à 5 colonnes est utilisée ici: http://web.archive.org/web/20120416024539/http://domain7 .com / mobile / tools / bootstrap / responsive

La grille à cinq colonnes est-elle illustrée au-dessus d'une partie du cadre de démarrage Twitter?

Gandalf
la source
Vous regardez une très ancienne version du bootstrap. Cherchez-vous à avoir une grille "réactive" à 5 colonnes sur le (dernier, j'espère) bootstrap?
Andres Ilich
3
Je viens de me rendre compte que celui indiqué est v1.3.0 et que le courant est 2.0.2. La dernière version est une grille à 12 colonnes, ce qui signifie que je peux avoir 2,3,4 et 6 colonnes égales. il serait possible d'avoir 5 colonnes égales sans avoir à changer beaucoup de choses.
Gandalf
vous pouvez, oui, mais cela nécessitera de lourdes modifications à certains éléments de la grille et également aux éléments de la grille réactifs. Votre site est-il réactif? Il serait un peu plus facile de trouver une réponse de cette façon, sinon ce serait beaucoup de code.
Andres Ilich
Oui, le site est réactif mais je devrais aussi modifier les éléments de la grille pas la partie responsive à mon humble avis.
Gandalf
1
J'ai un certain succès * avec .container.one-cinquième.colonne {largeur: 17%; } même si je m'attends à quelque chose de terrible à couper le souffle. 17.87847% aussi.
Gandalf

Réponses:

407

Utilisez cinq divs avec une classe de span2 et donnez au premier une 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>

Voila! 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>
jkofron.e
la source
44
ça ne va pas sur toute la largeur. c'est bien
quand
45
La solution que j'ai publiée est pleine largeur et crée 5 colonnes égales: VOICI LA RÉPONSE .
Fizzix
5
Ne va pas sur toute la largeur comme la réponse fournie par @fizzix ci-dessous. Fait une marge indésirable des deux côtés, comme ça - jsfiddle.net/wdo8L1ww
Fizzix
3
les colonnes semblent plutôt petites avec cette solution, donc je préfère la solution
@fizzix
2
Bootstrap 4 5 cols (pleine largeur) ne nécessite ni CSS ni SASS: stackoverflow.com/a/42226652/171456
Zim
526

Pour Bootstrap 3 et supérieur

Une fantastique disposition de 5 colonnes pleine largeur avec Twitter Bootstrap a été créée ici .

C'est de loin la solution la plus avancée car elle fonctionne de manière transparente avec Bootstrap 3. Elle vous permet de réutiliser les classes encore et encore, en association avec les classes Bootstrap actuelles pour une conception réactive.

CSS:
Ajoutez ceci à votre feuille de style globale, ou même au bas de votre bootstrap.cssdocument.

.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;
    }
}

Mettez-le à profit!
Par exemple, si vous souhaitez créer un élément div qui se comporte comme une disposition à cinq colonnes sur des écrans moyens et comme deux colonnes sur des écrans plus petits, il vous suffit d'utiliser quelque chose comme ceci:

<div class="row">
    <div class="col-md-5ths col-xs-6">
       ...
    </div>
</div>

DEMO DE TRAVAIL - Développez le cadre pour voir les colonnes devenir réactives.

UNE AUTRE DÉMO - Incorporer les nouvellescol-*-5thsclasses avec d'autres telles quecol-*-3etcol-*-2. Redimensionnez le cadre pour les voir tous passercol-xs-6en mode réactif.


Pour Bootstrap 4

Bootstrap 4 utilise désormais Flexbox par défaut, vous avez donc accès à ses pouvoirs magiques dès la sortie de la boîte. Consultez les colonnes de disposition 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>

DÉMO DE TRAVAIL

Fizzix
la source
1
Les appeler col-*-15peut être déroutant. Cela semble impliquer qu'ils font partie d'un système de grille à 15 colonnes, ce qui n'est pas le cas.
Paul D. Waite
2
@ PaulD.Waite - J'ai ajouté une petite note à ma réponse pour faire savoir aux gens.
Fizzix
2
col-*-15me col-*-5thsconvient , mais pourrait être un nom de colonne un peu moins déroutant. C'est ce que j'utilise pour que mes autres développeurs ne me viennent pas confus.
Mordred
3
Hey @scragar - Si vous affichez le style de toutes les classes de colonnes actuelles de Bootstrap, vous remarquerez qu'elles contiennent toutes position:relative; min-height: 1px; padding-right: 15px; padding-left: 15px;. Fondamentalement, le code que j'ai publié ne fait que l'étendre afin qu'il corresponde EXACTEMENT au style intégré de Bootstrap. J'applique ensuite une largeur de 20%sorte que 5 colonnes égales puissent tenir sur la page. Très simple :)
Fizzix
1
que diriez-vous de nommer la colonne 2/5? Ou devrions-nous utiliser: col-md-1ths pour 1/5 et col-md-2ths pour 2/5, col-md-5ths pour 5/5 = pleine largeur?
Alex
166

Pour Bootstrap 3 , si vous voulez utiliser la pleine largeur et utilisez LESS, SASSou quelque chose de similaire, tout ce que vous avez à faire est d'utiliser les fonctions de mixage de Bootstrapmake-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)
}

TOUPET:

.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 peut - on construire de véritables classes de colonne bootstrap pleine largeur à l' aide de ces mixins, mais vous pouvez également créer toutes les classes d'aide connexes 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)
}

TOUPET:

.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 d'un réglage @gridColumnsqui est parfaitement valide, mais qui change la largeur de la colonne principale pour tout le bootstrap. L'utilisation des fonctions de mixage ci-dessus ajoutera une disposition de 5 colonnes au-dessus des colonnes d'amorçage par défaut, de sorte qu'il ne cassera aucun outil tiers ou style existant.

lightswitch05
la source
5
La solution la plus propre, tout comme 2.4un 5e sur 12 ( 2.4*5=12), fonctionne pour Bootstrap 3 dans une grille à 12 colonnes. S'applique également à make-xs, make-smmais cela ne fonctionnera pas combiné avec d'autres définitions de col standard (la dernière priorité est
obtenue
6
Je suis choqué par les quelques votes positifs pour cette réponse. C'est de loin le moins hacky, utilisant non seulement la même convention de dénomination que les autres classes de colonnes Bootstrap, mais aussi les mêmes mixins que Bootstrap utilise pour créer ses propres colonnes, ce qui le rend probablement à l'épreuve du temps jusqu'au Bootstrap 4, à tout le moins.
Chris Fritz
3
C'est censé être la meilleure réponse. J'ai créé une bibliothèque (pour inclure offset, pullet push) en fonction de cela pour mon propre usage. N'hésitez pas à le vérifier
Kenny Ki
1
Comme tout le monde l'a dit, oui, c'est maintenant la bonne réponse. @Sherbrow a déclaré qu'ils "ne fonctionneront pas combinés avec d'autres définitions de col standard", mais ce n'est pas parce que cette solution est incorrecte en quelque sorte, c'est simplement parce que 12% 5! = 0.
Nick M
2
@ lightswitch05 Malheureusement, cela ne me convenait pas car j'avais une quantité dynamique de colonnes. Si je n'avais qu'une seule colonne, je voulais toujours que ce soit un cinquième de l'écran, mais en utilisant la réponse de Fizzix, une seule colonne couvrirait tout l'écran. J'ai réussi à le résoudre en utilisant les nouvelles fonctions de mixage Bootstrap 4. Je pourrais mettre à jour votre réponse pour l'inclure si vous le souhaitez?
Plog
40

Mise à jour 2019

Bootstrap 4.1+

Voici 5 colonnes égales, pleine largeur ( sans CSS ni SASS supplémentaires ) utilisant la grille de mise en page automatique :

<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 car Bootstrap 4 est désormais une boîte flexible. Vous pouvez obtenir les 5 colonnes à encapsuler dans la même en .rowutilisant une pause telle que <div class="col-12"></div>ou <div class="w-100"></div>toutes les 5 colonnes.

Voir aussi: Bootstrap - Disposition à 5 colonnes

Zim
la source
2
J'ai
2
Bon mais ne fonctionne qu'avec des rangées de 5 éléments. Si vous en avez plus, vous vous trompez. Voir mon violon amélioré
djibe
C'est pourquoi j'ai expliqué que vous devez utiliser la pause toutes les 5 colonnes. Votre solution fonctionne mais nécessite un CSS supplémentaire.
Zim
Pensez également à ajouter flex-nowrapà .rowcar les colonnes (automatiques) pourraient dépasser la largeur du parent.
Luuk Skeur
31

Vous trouverez ci-dessous un combo de réponses @machineaddict et @Mafnah, réécrites 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%;
    }
}
plaidcorp
la source
Où dois-je le placer et comment l'utiliser?
sergserg
1
@Serg 1. Placez-le en dessous / après le fichier css Bootstrap 2. Ajoutez la classe .fivecolumns au .row, puis imbriquez cinq colonnes avec la classe .col [, - sm, -lg] -2
plaidcorp
Ne va pas parfaitement pleine largeur dans certains cas.
Fizzix
Pourquoi col-xs-2 n'est-il pas ajouté aux déclarations?
jandal
@ganders juste un aperçu; Découvrez une autre réponse sur cette page: stackoverflow.com/questions/10387740/…
plaidcorp
27

Conservez le bootstrap d'origine avec 12 colonnes, ne le personnalisez pas. La seule modification que vous devez faire est quelques css après le css réactif du bootstrap d'origine, 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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</a></p>
    </div>
</div>

Remarque: Même si le span2 fois 5 n'est pas égal à 12 colonnes, vous avez l'idée :)

Un exemple de travail peut être trouvé ici http://jsfiddle.net/v3Uy5/6/

machineaddict
la source
10

Dans le cas où vous n'avez pas besoin de la même largeur exacte de colonnes, vous pouvez essayer de créer 5 colonnes en utilisant l'imbrication:

<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>

jsfiddle

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 hack donne le résultat acceptable dans de nombreux cas et ne nécessite aucune modification CSS (nous utilisons uniquement les classes d'amorçage natives).

DraggonZ
la source
9

Créez un téléchargement Bootstrap personnalisé pour une disposition à 5 colonnes

Accédez à la page de personnalisation Bootstrap 2.3.2 (ou Bootstrap 3 ) et définissez les variables suivantes (ne saisissez pas de points-virgules):

@gridColumns:           5;
@gridColumnWidth:       172px;
@gridColumnWidth1200:   210px;
@gridColumnWidth768:    128px;
@gridGutterWidth768:    21px;

Téléchargez votre build. Cette grille s'insérerait dans des conteneurs par défaut, préservant les largeurs de gouttière par défaut (presque).

Remarque: Si vous utilisez MOINS, mettez variables.lessà jour à la place.

Pavlo
la source
7

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>

caub
la source
flexbox est meilleur que bootstrap s'il convient à vos besoins.
ml242
6

J'ai voté pour la réponse de Mafnah, mais en y repensant, je suggérerais que ce qui suit est meilleur si vous conservez 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%;
}
Studio4
la source
1
La largeur réelle est de 17,94872% et elle ne répond pas, vous devrez définir une nouvelle marge pour chaque colonne dans toutes les requêtes @media.
machineaddict
5
<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%;
}
Mafnah
la source
1
cela devrait être .equal .span2 {largeur: 20%; }
Studio4
... et ça ne marche PAS. chaque colonne, sauf la première, a une marge à gauche.
machineaddict
5

Créez 5 éléments avec la classe col-sm-2 et ajoutez au premier élément également la classe col-sm-offset-1

Ps ce ne sera pas pleine largeur (il sera un peu en retrait à droite et à gauche de l'écran)

Le code devrait ressembler à ceci

<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>
agDev
la source
5

Bootstrap 4, nombre variable de colonnes par ligne

Si vous voulez avoir jusqu'à cinq colonnes par ligne, afin que moins de nombres de colonnes n'occupent toujours que 1/5 de la ligne chacune, la solution est d'utiliser les mixins de Bootstrap 4 :

SCSS:

.col-2-4 {
    @include make-col-ready(); // apply standard column margins, padding, etc.
    @include make-col(2.4); // 12/5 = 2.4
}
.col-sm-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(sm) {
        @include make-col(2.4);
    }
}
.col-md-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(md) {
        @include make-col(2.4);
    }
}
.col-lg-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(lg) {
        @include make-col(2.4);
    }
}
.col-xl-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(xl) {
        @include make-col(2.4);
    }
}

HTML:

<div class="container">    
  <div class="row">
    <div class="col-12 col-sm-2-4">1 of 5</div>
    <div class="col-12 col-sm-2-4">2 of 5</div>
    <div class="col-12 col-sm-2-4">3 of 5</div>
    <div class="col-12 col-sm-2-4">4 of 5</div>
    <div class="col-12 col-sm-2-4">5 of 5</div>
  </div>
  <div class="row">
    <div class="col-12 col-sm-2-4">1 of 2</div> <!-- same width as column "1 of 5" above -->
    <div class="col-12 col-sm-2-4">2 of 2</div> <!-- same width as column "2 of 5" above -->
  </div>
</div>
daGUY
la source
4

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 puis créez une grille de 20 colonnes (utilisez la personnalisation sur le site Web Bootstrap OU utilisez la version LESS / SASS).

Pour personnaliser sur le site Web de démarrage, accédez à la page Personnaliser et télécharger , mettez à jour la variable @grid-columnsde 12à 20. Ensuite, vous pourrez créer 4 ainsi que 5 colonnes.

Nipson
la source
3

Cela peut être fait avec l'imbrication et en utilisant un petit dépassement CSS.

<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 exemple de colonne égale

Et voici mon écriture complète sur coderwall

Cinq colonnes égales dans le bootstrap 3

Bradrice
la source
3

À mon avis, il vaut mieux l'utiliser comme ça avec moins de syntaxe. Cette réponse est basée sur la réponse de @fizzix

De cette façon, les colonnes utilisent des variables (@ grid-gutter-width, points d'arrêt multimédias) que l'utilisateur peut avoir remplacées et le comportement de cinq colonnes correspond au comportement de la grille à 12 colonnes.

/*
 * 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 */
in vitro
la source
3

Par défaut, Bootstrap ne fournit pas de système de grille qui nous permet de créer une disposition à cinq colonnes, vous devez créer une définition de colonne par défaut de la même manière que Bootstrap crée des classes personnalisées et des requêtes multimé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 du code html

<div class="row">
    <div class="col-md-15 col-sm-3">
    ...
    </div>
</div>
byteC0de
la source
3

Bootstrap par défaut peut évoluer jusqu'à 12 colonnes? Cela signifie que si nous voulons créer une disposition de 12 colonnes d'égale largeur, nous écririons douze fois à l'intérieur de div class = "col-md-1".

<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>
Manish Verma
la source
3

Disposition en 5 colonnes avec le style Twitter Bootstrap

.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;
    }
}
Sanjib Debnath
la source
3

Une solution qui ne nécessite pas beaucoup de CSS, ni de mise au point de la configuration 12col par défaut du bootstrap:

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*/
  }
}
nicolallias
la source
3

Il suffit de créer une nouvelle classe et de définir son comportement pour chaque requête mé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

GiorgosK
la source
2

Dans 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%;
}
guaph
la source
2

Comment ajouter une grille de 5 colonnes dans le 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>

Robind Kumar
la source
2

la solution la plus simple sans avoir besoin de modifier le 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 rompre au-delà de tout point d'arrêt, faites simplement un bloc btn-group. J'espère que cela aide quelqu'un.

Vikas Baru
la source
2

Cinq colonnes ne font clairement pas partie du bootstrap par conception.

Mais avec Bootstrap v4 (alpha), il y a 2 choses pour aider avec une disposition de grille compliquée

  1. Flex ( http://v4-alpha.getbootstrap.com/getting-started/flexbox/ ), le nouveau type d'élément (officiel - https://www.w3.org/TR/css-flexbox-1/ )
  2. Utilitaires réactifs ( 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 quelque chose comme ça, ça ira. Je suis tout à fait sûr que la norme à 12 grilles peut servir plus de 90% des cas d'utilisation - alors concevons de cette façon - développez-vous plus facilement aussi!

Le joli tutoriel flex est ici " https://css-tricks.com/snippets/css/a-guide-to-flexbox/ "

gonatee
la source
2

J'ai créé des définitions de mixin SASS basées sur des définitions de 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 en:

$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 le trouvera utile

Nulen
la source
2

Si quelqu'un utilise bootstrap-sass (v3), voici un code simple pour 5 colonnes utilisant des mélanges bootstrap:

  .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";
Vedmant
la source
1
merci, c'est ce que je cherchais, j'ai fait 1-5ths 2-5ths etc et même 3-10ths etc maintenant aussi, pour avoir plus de flexibilité, très pratique
morksinaanab
2

Pour Bootstrap 4.4+

Utilisez les toutes nouvelles row-cols-nclasses.

  1. Ajoutez de la row-cols-5classe à votre .rowdiv. Aucun CSS personnalisé n'est nécessaire.
  2. Voir le doc 4.4 ici pour les colonnes de ligne: https://getbootstrap.com/docs/4.4/layout/grid/#row-columns

Pour les versions de Bootstrap 4 antérieures à Bootstrap 4.4

  1. Copiez CSS ci-dessous (génial CSS par les auteurs de Bootstrap) et ajoutez-le à votre projet

  2. Lisez les documents cités ci-dessus pour l'utiliser correctement.

    .row-cols-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}@media (min-width:576px){.row-cols-sm-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-sm-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-sm-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-sm-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-sm-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-sm-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:768px){.row-cols-md-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-md-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-md-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-md-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-md-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-md-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:992px){.row-cols-lg-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-lg-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-lg-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-lg-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-lg-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-lg-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:1200px){.row-cols-xl-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-xl-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-xl-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-xl-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-xl-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-xl-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}

djibe
la source
1

.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%;
  }
}

Aroos
la source