web-dev-qa-db-fra.com

Cinq colonnes égales dans Twitter bootstrap

Je veux avoir 5 colonnes égales sur une page que je construis 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

La grille à cinq colonnes illustrée ci-dessus fait-elle partie du cadre Twitter bootstrap?

twitter-bootstraptwitter-bootstrap-3bootstrap-4
339
Gandalf

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 équidistantes 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>
388
jkofron.e

Pour Bootstrap 3 et plus

Une fantastique pleine largeur de 5 colonnes 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 paire avec les classes Bootstrap actuelles pour conception sensible.

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 souhaitez créer un élément div qui se comporte comme une mise en page à cinq colonnes sur des écrans de taille moyenne et 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 nouvelles classes col-*-5ths avec d'autres telles que col-*-3 et col-*-2. Redimensionnez le cadre pour les voir tous passer à col-xs-6 en mode responsive.

Pour Bootstrap 4

Bootstrap 4 utilise maintenant flexbox par défaut, vous avez donc accès à ses pouvoirs magiques tout de suite. Découvrez les colonnes de présentation 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>

DEMO DE TRAVAIL

487
Fizzix

Pour Bootstrap 3 , si vous voulez toute la largeur et utilisez LESS, SASS, ou quelque chose de similaire, tout ce que vous avez à faire est d'utiliser fonctions de mixin 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 vous pouvez construire la vraie pleine largeur bootstrap classes de colonnes en utilisant ces mixins, mais vous pouvez aussi construire tous les classes d’assistance associées 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 de la définition de @gridColumns qui est parfaitement valide, mais qui modifie la largeur de la colonne principale pour l'ensemble de bootstrap. L'utilisation des fonctions de mixage ci-dessus ajoutera une disposition de 5 colonnes au-dessus des colonnes par défaut bootstrap, de sorte à ne pas casser les outils tiers ni le style existant.

164
lightswitch05

Ci-dessous, une liste déroulante des réponses @machineaddict et @Mafnah, réécrites pour Bootstrap 3 (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%;
    }
}
30
plaidcorp

Mise à jour 2019

Bootstrap 4.1 +

Voici 5 colonnes égales de pleine largeur ( sans CSS supplémentaire ni SASS ) à l'aide de grille de présentation 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 parce que Bootstrap 4 est maintenant une flexbox. Vous pouvez obtenir que les 5 colonnes soient placées dans le même .row en utilisant une rupture de correction telle que <div class="col-12"></div> ou <div class="w-100"></div> toutes les 5 colonnes.

Voir aussi: Bootstrap - Disposition en 5 colonnes

30
Zim

Conservez l'original bootstrap avec 12 colonnes, ne le personnalisez pas. La seule modification que vous devez faire est quelques css après le css original bootstrap responsive, 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 une idée :)

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

26
machineaddict

Si vous n'avez pas besoin de la même largeur de colonnes exacte , vous pouvez essayer de créer 5 colonnes à l'aide de 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 de CSS (nous utilisons uniquement les classes natives bootstrap).

10
DraggonZ

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

Accédez à la page de personnalisation Bootstrap 2.3.2 (ou Bootstrap ) et définissez les variables suivantes (ne spécifiez pas de point-virgule):

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

Téléchargez votre build. Cette grille serait adaptée aux conteneurs par défaut tout en préservant les largeurs de gouttière par défaut (presque).

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

8
Pavlo

Avec flexbox http://output.jsbin.com/juziw

.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>
6
caub

J'ai voté en faveur de la réponse de Mafnah, mais si on y réfléchissait à nouveau, je suggérerais que ce qui suit est préférable 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%;
}
5
Studio4

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

P.s. ce ne sera pas la pleine largeur (il sera légèrement en retrait 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>
4
agDev
<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%;
}
4
Mafnah

Un autre moyen d'activer 5 colonnes dans Bootstrap 3 consiste à modifier le format de 12 colonnes utilisé par défaut par Bootstrap. Ensuite, créez une grille de 20 colonnes (utilisez la personnalisation sur le Bootstrap site Web OR utilisez la version LESS/SASS).

Pour personnaliser le site Web bootstrap, accédez à la page Personnalisation et téléchargement , mettez à jour la variable @grid-columns de 12 à 20. Ensuite, vous pourrez créer 4 ainsi que 5 colonnes.

3
Nipson

Créez simplement une nouvelle classe et définissez son comportement pour chaque requête multimédia selon vos 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

2
GiorgosK

Bootstrap 4, nombre variable de colonnes par ligne

Si vous voulez avoir jusqu'à cinq colonnes par ligne, de sorte qu'un nombre réduit de colonnes n'occupe toujours qu'un cinquième de la ligne, 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
}
.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>
2
daGUY

C'est génial: http://www.ianmccullough.net/5-column-bootstrap-layout/

Il suffit de faire:

<div class="col-xs-2 col-xs-15">

Et CSS:

.col-xs-15{
    width:20%;
}
2
Henning Fischer

5 colonnes avec Twitter Bootstrap style 

.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;
    }
}
2
Sanjib Debnath

Bootstrap par défaut peut-il évoluer jusqu'à 12 colonnes? Cela signifie que si nous voulons créer une présentation de 12 colonnes de largeur égale, nous écririons à l'intérieur de div class = "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>
2
Manish Verma

Cela peut être fait avec nidification et en utilisant un peu de 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: exemple de 5 colonnes égales

Et voici mon écriture complète sur coderwall

Cinq colonnes égales dans bootstrap

2
bradrice

À mon avis, il est préférable de l'utiliser comme ceci avec une syntaxe réduite. Cette réponse est basée sur le answer de @fizzix

De cette façon, les colonnes utilisent des variables (@ grid-Gutter-width, points d'arrêt des supports) que l'utilisateur peut avoir remplacées et le comportement de cinq colonnes correspond au comportement d'une grille de 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 */
2
vitro

Une solution qui ne nécessite pas beaucoup de CSS, ni de peaufiner bootstrap mise en page 12col par défaut:

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*/
  }
}
2
nicolallias

Par défaut, Bootstrap ne fournit pas de système de grille nous permettant 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 de média 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>
2
byteC0de

J'ai créé des définitions de mixin SASS basées sur bootstrap définitions pour un nombre quelconque 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

1
Nulen

Si quelqu'un utilise bootstrap-sass (v3), voici un code simple pour 5 colonnes utilisant les 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";
1
Vedmant

Comment vous pouvez ajouter une grille de 5 colonnes 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>
1
Robind Kumar

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%;
}
1
guaph

Cinq colonnes ne font clairement pas partie de bootstrap de par leur conception.

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

  1. Flex ( http://v4-alpha.getbootstrap.com/getting-started/flexbox/ ), le nouveau type d'élément (official - https://www.w3.org/ TR/css-flexbox-1 / )
  2. Utilitaires réactifs ( http://v4-alpha.getbootstrap.com/layout/responsive-utilities/ )

En terme simple, 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 autre chose, tout ira bien. Je suis à peu près sûr que la norme 12 grilles est en mesure de servir plus de 90% des cas d'utilisation - alors concevons de cette façon - développons-nous plus facilement aussi!

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

1
gonatee

la solution la plus simple sans avoir besoin de modifier 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 que ceux-ci dépassent un point d'arrêt, créez simplement un bloc btn-group. J'espère que ça aide quelqu'un.

1
Vikas Baru

le système de grille bootstrap, qui fait partie de 12 grid.Ainsi, je l'ai divisé en deux grilles (7 + 5). Ces 7 et 5 contiennent également 12 grille complète.C'est pourquoi je me suis séparé de 7 (4 + 4 + 4) et 5 (6 + 6) donc il faudra tout le contenu, simple

HTML

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

CSS

div.col-sm-7.five-three {
  width: 60% !important;
}
div.col-sm-5.five-two {
  width: 40% !important;
}
0
Anand Pandey
.col-half-offset{
    margin-left:4.166666667% !important;
    float: left;
}

<div className="row1 marginTop20">
    <div className="col-xs-12 col-sm-2 col-md-2">
        1
    </div>
    <div className="col-xs-12 col-sm-2 col-md-2 col-half-offset">
        2
    </div>
    <div className="col-xs-12 col-sm-2 col-md-2 col-half-offset">
        3
    </div>
    <div className="col-xs-12 col-sm-2 col-md-2 col-half-offset">
        4
    </div>
    <div className="col-xs-12 col-sm-2 col-md-2 col-half-offset">
        5
    </div>
    <div className="clearfix"></div>
</div>
0
Pankaj Upadhyay
.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%;
  }
}
0
Aroos

Bootstrap ou un autre système de grille, cela ne signifie pas toujours plus simple et meilleur. Dans votre .container ou .row (pour garder votre mise en page réactive), vous pouvez simplement créer 5 divs (avec la classe .col f.e.) et ajouter des css comme ceci:
.col { width: 20%; float: left };

0
Vasyl Gutnyk

Une improvisation sur la réponse de @ lightswitch, si nous avons besoin d'une grille de 5 colonnes utilisant des itérations LESS

.make-fifth-col(@index) when (@index > 0) {
  @class-name: ~".col-md-5th-@{index}";

  @{class-name} {
    .make-md-column(1.2*@index);
  }

  .make-fifth-col(@index - 1);
}

.make-fifth-col(10);

Cela va générer les classes CSS .col-md-5th-1, col-md-5th-2, col-md-5th-3, et ainsi de suite, ce qui correspond à 10%, 20%, 30%... respectivement

0
Mudassir Ali

Pour Twitter bootstrap 3, il s'agit du 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%;">
0
paulalexandru

Vous pouvez utiliser le petit truc pour rendre la solution col-md-2 avec compensations pleine largeur. Il utilise la méthode utilisée par bootstrap pour supprimer (masquer) les paddings de 15 pixels.

Je veux dire en ajoutant "-" les marges. En fait, le calcul (-10% - 15px); marges pour les deux côtés. (10% est la largeur du décalage et 15px pour le remplissage).

Le seul inconvénient est qu'il fera défiler la page horizontalement, vous aurez donc besoin de overflow-x: hidden sur le parent de la ligne.

css:
.row-xs-5 {
    margin-left: calc(-10% - 15px);
    margin-right: calc(-10% - 15px);
}
@media (min-width: 768px) {
  .row-sm-5 {
    margin-left: calc(-10% - 15px);
    margin-right: calc(-10% - 15px);
  }
}
@media (min-width: 992px) {
  .row-md-5 {
    margin-left: calc(-10% - 15px);
    margin-right: calc(-10% - 15px);
  }
}
@media (min-width: 1200px) {
  .row-lg-5 {
    margin-left: calc(-10% - 15px);
    margin-right: calc(-10% - 15px);
  }
}

html:
<div style="overflow-x:hidden;">
  <div class="row row-md-5">
    <div class="col-xs-6 col-md-2 col-md-offset-1">col1</div>
    <div class="col-xs-6 col-md-2">col2</div>
    <div class="col-xs-6 col-md-2">col3</div>
    <div class="col-xs-6 col-md-2">col4</div>
    <div class="col-xs-6 col-md-2 text-right">col5</div>
  </div>
</div>

Voici la démo: http://jsfiddle.net/sct3j/171/

0
Krzysztof Duszczyk

Mon approche préférée de ce problème est de créer un mixin SASS utilisant les variables Bootstrap existantes basées sur le mixin make-grid-columns .

_// Custom Grid Columns
// 
// $name - determines the class names: eg. ".col-5ths, .col-sm-5ths ..."
// $size - determines the width (2.4 is one fifth of 12, the default number of columns)
@mixin custom-grid-columns($name, $size, $grid-columns: $grid-columns, $breakpoints: $grid-breakpoints) {
    $columns: round($grid-columns / $size);

    %custom-grid-column {
        @include make-col-ready();
    }

    @each $breakpoint in map-keys($breakpoints) {
        $infix: breakpoint-infix($breakpoint, $breakpoints);

        .col#{$infix}-#{$name} {
            @extend %custom-grid-column;
        }

        @include media-breakpoint-up($breakpoint, $breakpoints) {
            // Create column
            .col#{$infix}-#{$name} {
                @include make-col($size);
            }

            // Create offset
            @if not ($infix=="") {
                .offset#{$infix}-#{$name} {
                    @include make-col-offset($size);
                }
            }
        }
    }
}
_

Vous pouvez ensuite appeler le mixin pour générer la colonne personnalisée et les classes offset.

_@include custom-grid-columns('5ths', 2.4);
_
0
Logan

Dans bootstrap v4.3.1, il s’agit d’une colonne de 12/5 = 2,4 colonnes de large. appelons-le col-2dot4 (et col-sm-2dot4, col-md-2dot4,…).

Et chaque colonne devrait avoir 20% de l'espace disponible.

Le code SCSS qui se présente comme suit:

@mixin make-5-grid-column($columns: $grid-columns, $Gutter: $grid-Gutter-width, $breakpoints: $grid-breakpoints) {

  // Common properties for all breakpoints
  %grid-column {
    position: relative;
    width: 100%;
    padding-right: $Gutter / 2;
    padding-left: $Gutter / 2;
  }

  @each $breakpoint in map-keys($breakpoints) {
    $infix: breakpoint-infix($breakpoint, $breakpoints);

    .col#{$infix}-2dot4 {
      @extend %grid-column;
    }

    .col#{$infix},
    .col#{$infix}-auto {
      @extend %grid-column;
    }

    @include media-breakpoint-up($breakpoint, $breakpoints) {

      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
      .col#{$infix} {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
      }

      .col#{$infix}-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%; // Reset earlier grid tiers
      }


      .col#{$infix}-2dot4 {
        @include make-col(1, 5);
      }
    }
  }
}

@if $enable-grid-classes {
  @include make-5-grid-column();
}
0
Sky Yip