Plus de 12 colonnes de bootstrap avec un défilement horizontal

j'essaie de faire une table en utilisant le système de grille bootstrap. Je sais que nous ne devrions utiliser que 12 colonnes par rangée. Mais je voulais avoir plus de 12 colonnes avec un défilement horizontale pour la table entière. Donc j'essaye avec le code suivant snippet

<span class="col-md-2" style="text-align: center;"><b>Field 1</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 2</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 3</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 4</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 5</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 6</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 7</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 8</b></span>

je voulais afficher 8 champs comme mentionné ci-dessus dans une ligne. Mais après le champ 6, deux autres champs vont tomber. Y a-t-il un moyen d'avoir les 8 champs en une seule ligne avec défilement horizontal?

10
demandé sur Gleb Kemarsky 2016-07-14 22:04:34

4 réponses

quatre astuces avec la grille Bootstrap

1) 8 colonnes

vous pouvez utiliser des grilles imbriquées. Sans tables ni personnalisations. Par exemple:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 1</b></div>
        <div class="col-md-6"><b>Field 2</b></div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 3</b></div>
        <div class="col-md-6"><b>Field 4</b></div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 5</b></div>
        <div class="col-md-6"><b>Field 6</b></div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 7</b></div>
        <div class="col-md-6"><b>Field 8</b></div>
      </div>
    </div>
  </div>
</div>

2) de Défilement

augmenter la largeur de la rangée principale, si vous voulez ajouter le défilement horizontal:

@media (min-width: 992px) {
  .container-scroll {
    overflow-x: auto;
  }
  .container-scroll > .row {
    width: 133.33333333%; /* = 100% * 4/3 */
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container-fluid container-scroll">
  <div class="row">
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 1</b></div>
        <div class="col-md-6"><b>Field 2</b></div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 3</b></div>
        <div class="col-md-6"><b>Field 4</b></div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 5</b></div>
        <div class="col-md-6"><b>Field 6</b></div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 7</b></div>
        <div class="col-md-6"><b>Field 8</b></div>
      </div>
    </div>
  </div>
</div>

3) Divers nombre de colonnes

Si chaque ligne a un divers nombre de colonnes, mais le nombre des colonnes est connu à l'avance.

dans ce cas, les lignes peuvent être différentes par la largeur. Par conséquent, il est nécessaire de définir la largeur des colonnes par rapport à la largeur de l'écran, plutôt que de la largeur de la ligne.

  1. utiliser vw au lieu de %
  2. définir une largeur spéciale pour la rangée si elle est plus large alors 100vw

@media (min-width: 992px) {
  .container-scroll {
    overflow-x: auto;
  }
  .container-scroll .columns-16 {
    width: 133.33333333vw;  /* = 100vw * 16/12 */
  }
  .container-scroll .columns-24 {
    width: 200vw;  /* = 100vw * 24/12 */
  }
  .container-scroll .col-md-2 {
    width: 16.66666667vw !important;
  }
}

.container-scroll > .row {
  margin-top: 24px;
}
.container-scroll > .row > .col-md-2 {
  font-weight: bold;
  text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container-fluid container-scroll">
  <div class="row columns-16">
    <div class="col-md-2">Field 1</div>
    <div class="col-md-2">Field 2</div>
    <div class="col-md-2">Field 3</div>
    <div class="col-md-2">Field 4</div>
    <div class="col-md-2">Field 5</div>
    <div class="col-md-2">Field 6</div>
    <div class="col-md-2">Field 7</div>
    <div class="col-md-2">Field 8</div>
  </div>
</div>
  
<div class="container-fluid container-scroll">
  <div class="row columns-24">
    <div class="col-md-2">Field 1</div>
    <div class="col-md-2">Field 2</div>
    <div class="col-md-2">Field 3</div>
    <div class="col-md-2">Field 4</div>
    <div class="col-md-2">Field 5</div>
    <div class="col-md-2">Field 6</div>
    <div class="col-md-2">Field 7</div>
    <div class="col-md-2">Field 8</div>
    <div class="col-md-2">Field 9</div>
    <div class="col-md-2">Field 10</div>
    <div class="col-md-2">Field 11</div>
    <div class="col-md-2">Field 12</div>
  </div>
</div>
  
<div class="container-fluid container-scroll">
  <div class="row">
    <div class="col-md-2">Field 1</div>
    <div class="col-md-2">Field 2</div>
    <div class="col-md-2">Field 3</div>
    <div class="col-md-2">Field 4</div>
  </div>
</div>

4) Nombre inconnu de colonnes

Convertir les colonnes en en ligne-blocs, si vous ne connaissez pas le nombre de colonnes dans une rangée.

@media (min-width: 992px) {
  .container-scroll > .row {
    overflow-x: auto;
    white-space: nowrap;
  }
  .container-scroll > .row > .col-md-2 {
    display: inline-block;
    float: none;
  }
}

.container-scroll > .row {
  margin-top: 24px;
}
.container-scroll > .row > .col-md-2 {
  font-weight: bold;
  text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container-fluid container-scroll">
  <div class="row">
    <div class="col-md-2">Field 1</div>
    <div class="col-md-2">Field 2</div>
    <div class="col-md-2">Field 3</div>
    <div class="col-md-2">Field 4</div>
    <div class="col-md-2">Field 5</div>
    <div class="col-md-2">Field 6</div>
    <div class="col-md-2">Field 7</div>
    <div class="col-md-2">Field 8</div>
  </div>

  <div class="row">
    <div class="col-md-2">Field 1</div>
    <div class="col-md-2">Field 2</div>
    <div class="col-md-2">Field 3</div>
    <div class="col-md-2">Field 4</div>
    <div class="col-md-2">Field 5</div>
    <div class="col-md-2">Field 6</div>
    <div class="col-md-2">Field 7</div>
    <div class="col-md-2">Field 8</div>
    <div class="col-md-2">Field 9</div>
    <div class="col-md-2">Field 10</div>
    <div class="col-md-2">Field 11</div>
    <div class="col-md-2">Field 12</div>
  </div>

  <div class="row">
    <div class="col-md-2">Field 1</div>
    <div class="col-md-2">Field 2</div>
    <div class="col-md-2">Field 3</div>
    <div class="col-md-2">Field 4</div>
  </div>
</div>
18
répondu Gleb Kemarsky 2016-07-17 10:42:32

Pour obtenir plus de colonnes:

you can make your own Bootstrap variation from here: http://getbootstrap.com/customize/ où vous pouvez définir le nombre de colonnes que la mise en page de la grille utilise ainsi que pratiquement toute autre personnalisation de la CSS avant de télécharger, installer et ensuite en utilisant ce (nouveau) modèle sur votre site web.

Facile.

Ou, si vous avez envie d'un défi et vous avez quelques heures à tuer, vous pouvez ouvrir le Bootstrap.css le fichier et ajouter manuellement de nouveaux éléments CSS et réaligner le width [pourcentage] paramètres pour chaque définition de la colonne.

tables à défiler horizontalement

tout le principe de bootstrap est de ne pas avoir quoi que ce soit qui déborde l'écran, quoi qu'il arrive. Si vous avez spécifiquement vous voulez que les choses débordent alors vous ne devriez pas utiliser bootstrap ou vous aurez besoin de modifier manuellement certains paramètres dans le CSS, encore une fois, je vous renvoie à http://getbootstrap.com/customize/ qui avoir une solution, sinon vous pouvez explorer les CSS et définir quelques paramètres CSS dans le fichier modèle bootstrap.

il peut bien y avoir une classe prédéfinie de CSS Bootstrap table que vous pouvez utiliser pour de telles choses, Avez-vous exploré le Bootstrap documentation 

    <div class "row">
      <div class="col-6">
        <div class "row">
          <div class="col-1">
            1
          </div>
          <div class="col-1">
            2
          </div>
          <div class="col-1">
            3
          </div>
          <div class="col-1">
            4
          </div>
          <div class="col-1">
            5
          </div>
          <div class="col-1">
            6
          </div>
          <div class="col-1">
            7
          </div>
          <div class="col-1">
            8
          </div>
          <div class="col-1">
            9
          </div>
          <div class="col-1">
            10
          </div>
          <div class="col-1">
            11
          </div>
          <div class="col-1">
            12
          </div>
        </div>
      </div>
      <div class="col-6">
        <div class "row">
          <div class="col-1">
            13
          </div>
          <div class="col-1">
            14
          </div>
          <div class="col-1">
            15
          </div>
          <div class="col-1">
            16
          </div>
          <div class="col-1">
            17
          </div>
          <div class="col-1">
            18
          </div>
          <div class="col-1">
            19
          </div>
          <div class="col-1">
            20
          </div>
          <div class="col-1">
            21
          </div>
          <div class="col-1">
            22
          </div>
          <div class="col-1">
            23
          </div>
          <div class="col-1">
            24
          </div>
        </div>
      </div>
    </div>
0
répondu Alan 2017-11-14 19:29:52 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 1</b></div>
        <div class="col-md-6"><b>Field 2</b></div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 3</b></div>
        <div class="col-md-6"><b>Field 4</b></div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 5</b></div>
        <div class="col-md-6"><b>Field 6</b></div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 7</b></div>
        <div class="col-md-6"><b>Field 8</b></div>
      </div>
    </div>
  </div>
</div>
0
répondu anupriya 2018-03-29 05:28:24