web-dev-qa-db-fra.com

Bootstrap - Disposition en 5 colonnes

J'essaie d'obtenir une disposition de 5 colonnes sur toute la largeur, mais je ne trouve pas la solution qui correspond à mes besoins.

Voici le code que j'utilise 

  <!-- Content Section -->
    <div class="container">
      <div class="row">
        <div class="col-lg-12" style="border: 1px solid red">
          <div class="row">
            <div class="col-xs-12">
              <div class="col-xs-2 col-xs-offset-1" id="p1">One</div>
              <div class="col-xs-2" id="p2">Two</div>
              <div class="col-xs-2" id="p3">Three</div>
              <div class="col-xs-2" id="p4">Four</div>
              <div class="col-xs-2" id="p5">Five</div>
            </div>
            <!-- //col-lg-12 -->
          </div>
          <!-- //row -->
          lorem
        </div>
      </div>
      <!-- //col-lg-12 -->
    </div>
    <!-- //row -->
  </div>
  <!-- //container -->

En conséquence, je reçois  enter image description here

Et voici ce que j'essaie de réaliser. Largeur complète de 5 colonnes avec un espace entre chaque colonne  enter image description here

htmlcsstwitter-bootstrap
26
Vodokan

.col-xs-2{
    background:#00f;
    color:#FFF;
}
.col-half-offset{
    margin-left:4.166666667%
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row" style="border: 1px solid red">
        <div class="col-xs-2" id="p1">One</div>
        <div class="col-xs-2 col-half-offset" id="p2">Two</div>
        <div class="col-xs-2 col-half-offset" id="p3">Three</div>
        <div class="col-xs-2 col-half-offset" id="p4">Four</div>
        <div class="col-xs-2 col-half-offset" id="p5">Five</div>
        <div>lorem</div>
    </div>
</div>

Ça devrait aller.

35
VannTile Ianito

5 colonnes avec Bootstrap 4

Voici 5 colonnes égales de pleine largeur (no extra CSS ou SASS) à l'aide de la grille de la disposition 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 maintenant flexbox. Vous pouvez obtenir que les 5 colonnes soient placées dans le même .row en utilisant une rupture de repère telle que <div class="col-12"></div> ou <div class="w-100"></div> sur 5 colonnes.

13
Zim

Parfois, on me demande d'utiliser des structures de grille assez étranges dans les sites Web bootstrap existants (sans gâcher le code actuel). Ce que j’ai fait, c’est de créer un fichier CSS séparé que je peux simplement insérer dans les projets d’initialisation actuels et utiliser les styles de disposition de la grille qu’il contient. Voici ce que le fichier bootstrap-5ths.css contient avec un exemple de son apparence pour la version 4 de bootstrap. 

Si vous souhaitez utiliser cela avec la version 3 de Bootstrap, supprimez simplement les styles col-xl- * et modifiez les min-widths 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>

5
Myke Black

Ajoutez simplement 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;
    }
}
5
Rafael Prato

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>
1
Pankaj Upadhyay

Consultez cette page pour obtenir des informations générales sur la présentation de Boostrap http://getbootstrap.com/css/#grid-offsetting

Essaye ça:

<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 div inégale avec col-xs- 2,3,2,3,2 respectivement. Les deux div avec col-xs-3 ayant une taille égale à 1,5 fois celle du col-xs-2 div, la largeur de la colonne doit être égale à 2/3x (1.5 x 2/3 = 1) et à la largeur de col-xs-3 pour correspondre au reste.

1
Chris Dobson

Si vous souhaitez appliquer une largeur de colonne de 20% pour chaque ligne que vous avez, même si certaines lignes ne contiennent pas 5 colonnes, vous devrez ajouter ce qui suit à votre fichier css ou scss:

.col-xs-5-cols,
    .col-sm-5-cols,
    .col-md-5-cols,
    .col-lg-5-cols {
        position: relative;
        width: 100%;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }

    .col-xs-5-cols {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
    @media (min-width: 768px) {
        .col-sm-5-cols {
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
            max-width: 20%;
        }
    }
    @media (min-width: 992px) {
        .col-md-5-cols {
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
            max-width: 20%;
        }
    }
    @media (min-width: 1200px) {
        .col-lg-5-cols {
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
            max-width: 20%;
        }
    }

Et dans votre code HTML, utilisez la classe ajoutée comme suit:

<div class="row">
        <div class="col-lg-5-cols"></div>
        <div class="col-lg-5-cols"></div>
        <div class="col-lg-5-cols"></div>
        <div class="col-lg-5-cols"></div>
        <div class="col-lg-5-cols"></div>
</div>
1
Luay Abdulraheem

Mettez quelques margin-left dans toutes les divs_ vertes mais pas dans la première

0
arodriguezdonaire

peut utiliser 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>
0
MiPhyo

Version copypastable de solution 5 colonnes de wearesicc avec variables d'amorçage:

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

Voici un autre moyen simple de le faire, en ajoutant 20% de largeur à 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>
0
Nitin Uprety

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

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

Donc, dans votre variables.less, cherchez: @grid-columns: 12 et remplacez-le par 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>

Personnellement, j’utiliserais display: flex pour cela car le bootstrap n’est pas conçu pour une division en 5 colonnes.

0
Dan Gamble