5 colonnes avec Bootstrap 4

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 colums à envelopper dans le même .row en utilisant un rupture de clearfix telle que <div class="col-12"></div> ou <div class="w-100"></div> très 5 colonnes.

il suffit d'ajouter ceci à votre CSS

/* 5 Columns */

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

parfois, on me demande d'utiliser des maquettes de grille assez étranges dans les sites bootstrap existants (sans gâcher le code actuel). Ce que j'ai fait est de créer un fichier CSS séparé que je peux simplement passer dans les projets bootstrap actuels et utiliser les styles de mise en page de grille là-dedans. Voici ce que le bootstrap-5e.le fichier css contient avec un exemple de la façon dont il cherche la version 4 de bootstrap.

si vous souhaitez l'utiliser avec bootstrap version 3, il vous suffit de supprimer le col-xl-* changer les styles et changer les largeurs minimales de 576px à 768px, 768px à 992px et 992px à 1200px.

.col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths, .col-xl-5ths, 
.col-xs-two5ths, .col-sm-two5ths, .col-md-two5ths, .col-lg-two5ths, .col-xl-two5ths, 
.col-xs-three5ths, .col-sm-three5ths, .col-md-three5ths, .col-lg-three5ths, .col-xl-three5ths, 
.col-xs-four5ths, .col-sm-four5ths, .col-md-four5ths, .col-lg-four5ths, .col-xl-four5ths, 
.col-xs-five5ths, .col-sm-five5ths, .col-md-five5ths, .col-lg-five5ths, .col-xl-five5ths, 
{
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 576px) {
    .col-sm-5ths {width: 20%;float: left;}
    .col-sm-two5ths {width: 40%;float: left;}
    .col-sm-three5ths {width: 60%;float: left;}
    .col-sm-four5ths {width: 80%;float: left;}
}

@media (min-width: 768px) {
    .col-md-5ths {width: 20%;float: left;}
    .col-md-two5ths {width: 40%;float: left;}
    .col-md-three5ths {width: 60%;float: left;}
    .col-md-four5ths {width: 80%;float: left;}
}

@media (min-width: 992px) {
    .col-lg-5ths {width: 20%;float: left;}
    .col-lg-two5ths {width: 40%;float: left;}
    .col-lg-three5ths {width: 60%;float: left;}
    .col-lg-four5ths {width: 80%;float: left;}
}

@media (min-width: 1200px) {
    .col-xl-5ths {width: 20%;float: left;}
    .col-xl-two5ths {width: 40%;float: left;}
    .col-xl-three5ths {width: 60%;float: left;}
    .col-xl-four5ths {width: 80%;float: left;}
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
  <div class="col-md-5ths">1</div>
  <div class="col-md-5ths">1</div>
  <div class="col-md-5ths">1</div>
  <div class="col-md-5ths">1</div>
  <div class="col-md-5ths">1</div>
 </div>
<div class="row">
  <div class="col-md-5ths">1</div>
  <div class="col-md-two5ths">2</div>
  <div class="col-md-two5ths">2</div>
</div>
<div class="row">
  <div class="col-md-three5ths">3</div>
  <div class="col-md-two5ths">2</div>
 </div>
<div class="row">
  <div class="col-md-four5ths">4</div>
  <div class="col-md-5ths">1</div>
 </div>
<div class="row">
  <div class="col-md-five5ths">5</div>
 </div>
 </div>

consultez cette page pour la mise en page générale de Boostrap http://getbootstrap.com/css/#grid-offsetting

essayez ceci:

<div class="col-xs-2" id="p1">One</div>
<div class="col-xs-3">
  <div class="col-xs-8 col-xs-offset-2" id="p2">Two</div>
</div>
<div class="col-xs-2" id="p3">Three</div>
<div class="col-xs-3">
  <div class="col-xs-8 col-xs-offset-2" id="p4">Four</div>
</div>
<div class="col-xs-2" id="p5">Five</div>

j'ai divisé la largeur en 5 inégales div avec col-xs- 2,3,2,3,2 respectivement. Les deux div avec col-xs-3 sont 1,5 fois la taille du col-xs-2 div , de sorte que la largeur de la colonne doit être 2/3x ( 1.5 x 2/3 = 1 ) les col-xs-3 largeurs pour correspondre au reste.

CSS

.bg{
    background-color: #9DC3E6;
    border-radius: 10px;
    color: #fff;
    padding: 15px;
}
.col-xs-5-cols,
.col-sm-5-cols,
.col-md-5-cols,
.col-lg-5-cols {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-xs-5-cols {
  width: 20%;
  float: left;
}

@media (min-width: 768px) {
  .col-sm-5-cols {
      width: 20%;
      float: left;
  }
}

@media (min-width: 992px) {
  .col-md-5-cols {
      width: 20%;
      float: left;
  }
}

@media (min-width: 1200px) {
  .col-lg-5-cols {
      width: 20%;
      float: left;
  }
}

html

<div className="row">
    <div className="col-md-5-cols">1<div className="bg"></div></div>
    <div className="col-md-5-cols">2<div className="bg"></div></div>
    <div className="col-md-5-cols">3<div className="bg"></div></div>
    <div className="col-md-5-cols">4<div className="bg"></div></div>
    <div className="col-md-5-cols">5<div className="bg"></div></div>
</div>

Mettez margin-left tout vert divs mais pas dans le premier

la meilleure façon de le faire honnêtement est de changer le nombre de colonnes que vous avez au lieu d'essayer de faire glisser 5 en 12.

le meilleur nombre que vous pouvez probablement utiliser est 20 car il est divisible par 2, 4 & 5.

dans votre variables.less cherchez: @grid-columns: 12 et changez ceci en 20 .

puis changez votre html en:

      <div class="row">
        <div class="col-xs-20">
          <div class="col-xs-4" id="p1">One</div>
          <div class="col-xs-4" id="p2">Two</div>
          <div class="col-xs-4" id="p3">Three</div>
          <div class="col-xs-4" id="p4">Four</div>
          <div class="col-xs-4" id="p5">Five</div>
        </div>
        <!-- //col-lg-20 -->
      </div>

j'utiliserais personnellement display: flex pour ceci car bootstrap n'est pas conçu pour une séparation à 5 colonnes.

Copypastable version de wearesicc 5 col solution avec bootstrap variables:

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: ($gutter / 2);
    padding-left: ($gutter / 2);
}

.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: $screen-sm) {
    .col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: $screen-md) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: $screen-lg) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

peut être utilisé comme ci-dessous dans bootstrap3:

<div class="row">

    <div class="col-md-2 col-md-offset-1">One</div>
    <div class="col-md-2">Two</div>
    <div class="col-md-2">Three</div>
    <div class="col-md-2">Four</div>
    <div class="col-md-2">Five</div>

</div>

Voici une autre façon simple de le faire, en ajoutant la largeur de 20% à chaque col-xs - 2:

<div class="col-xs-12">
     <div class="col-xs-2" style="width:20%;" id="p1">One</div>
     <div class="col-xs-2" style="width:20%;" id="p2">Two</div>
     <div class="col-xs-2" style="width:20%;" id="p3">Three</div>
     <div class="col-xs-2" style="width:20%;" id="p4">Four</div>
     <div class="col-xs-2" style="width:20%;" id="p5">Five</div>
</div>