Plus de 12 colonnes bootstrap avec un scroll horizontal

Je suis en train de faire un tableau à l'aide de bootstrap système de grille. Je sais que nous devrions utiliser seulement 12 colonnes par ligne. Mais je voulais avoir plus de 12 colonnes avec un défilement horizontale pour la table entière. Donc, je suis en train d'essayer avec l'extrait de code suivant

<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 les 8 domaines comme mentionné ci-dessus dans une seule ligne. Mais après la zone 6, deux autres champs sont à venir vers le bas. Est-il possible d'avoir toutes les 8 champs dans l'unique ligne avec de défilement horizontale.

source d'informationauteur newbie

  1. 1

    Pour obtenir plus de colonnes:

    Vous pouvez faire votre propre Bootstrap variation à partir d'ici: http://getbootstrap.com/customize/ où vous pouvez définir le nombre de colonnes de la grille de mise en page utilise aussi bien comme à peu près toute autre personnalisation du CSS avant de télécharger, d'installer et d'utiliser ensuite 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 fichier et l'ajouter manuellement CSS de nouveaux éléments et de réaligner la width [pourcentage] paramètres pour chaque définition de la colonne.

    Défilement horizontal tables

    La prémisse de bootstrap est de n'avoir rien de dépassement de l'écran, n'importe quoi. Si vous ne voulez que les choses à débordement ensuite, soit vous ne devriez pas être en utilisant 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 pourrait avez une solution, sinon, vous pouvez explorer les CSS et mis un peu de CSS paramètres dans le fichier de bootstrap fichier de modèle.

    Il y a peut-être une pré-définis bootstrap tableau de la classe css que vous pouvez utiliser pour de telles choses, avez-vous examiné les Bootstrap, documentation?

    Ou Recherche d'autres questions sur un Débordement de Pile peut vous donner quelques réponses utiles pour le faire manuellement.

  2. 0

    Vous pouvez diviser bootstrap col-de 12 à 2. Vous avez maintenant 24 colonnes

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