8 colonnes dans Twitter Bootstrap
Comment puis-je configurer 8 colonnes égales dans la dernière version du bootstrap de Twitter?.
Je peux créer 4 colonnes égales en procédant comme suit, mais je ne comprends pas comment je peux en obtenir 8:
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<div class="col-sm-12 col-xs-6">
<a href="#"><img src="/image.png" class="img-responsive" alt="..."></a>
</div>
</div>
<div class="col-sm-3">
<div class="col-sm-12 col-xs-6">
<a href="#"><img src="/image.png" class="img-responsive" alt="..."></a>
</div>
</div>
<div class="col-sm-3">
<div class="col-sm-12 col-xs-6">
<a href="#"><img src="/image.png" class="img-responsive" alt="..."></a>
</div>
</div>
<div class="col-sm-3">
<div class="col-sm-12 col-xs-6">
<a href="#"><img src="/image.png" class="img-responsive" alt="..."></a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-3">
1
</div>
<div class="col-xs-3">
2
</div>
<div class="col-xs-3">
3
</div>
<div class="col-xs-3">
4
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-3">
5
</div>
<div class="col-xs-3">
6
</div>
<div class="col-xs-3">
7
</div>
<div class="col-xs-3">
8
</div>
</div>
</div>
</div>
Je sais que c'est un sujet assez ancien, mais c'est le premier résultat de la recherche sur ce problème. J'espère donc que je peux me permettre de donner une réponse qui, à mon avis, est meilleure que toutes les options actuelles fournies ici.
Dans une présentation en n colonnes, je ne veux pas avoir à mettre au point des éléments bizarres .row.col- qui ne me permettent pas de redimensionner lorsque je descends dans les points d'arrêt.
Par exemple, la réponse acceptée actuellement ici indique correctement que vous ne pouvez pas faire cela avec le bootstrap par défaut, mais la réponse suivante suggère que vous imbriquiez .col-xs-3 à l'intérieur de .col-xs-6 et je suppose que beaucoup de gens qui viennent ici l'utilisent parce que est la seule réponse pratique que vous pouvez trouver dans la première page d'une recherche google.
Et si je veux 8 colonnes sur le point d'arrêt lg, puis 4 colonnes sur les tablettes et 2 colonnes sur mobile? Cette réponse ne se dégrade pas avec grâce. Cette méthode sera, et il est incroyablement facile à mettre en œuvre.
Tout d'abord, ajoutez ceci à votre fichier CSS:
.col-xs-8r,
.col-sm-8r,
.col-md-8r,
.col-lg-8r {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-8r {
width: 12.5%;
float: left;
}
@media (min-width: 768px) {
.col-sm-8r {
width: 12.5%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-8r {
width: 12.5%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-8r {
width: 12.5%;
float: left;
}
}
Ensuite, ajoutez col-*-8r à vos colonnes comme suit:
<div class="row">
<div class="col-xs-4 col-sm-3 col-md-8r">
...
</div>
</div>
Maintenant, vous avez une disposition de 8 colonnes qui peut fonctionner sur tous les points d'arrêt.
La bonne chose à propos de cette méthode est que si vous avez besoin d’un nombre impair de colonnes, il est très facile d’étendre ceci. Vous divisez simplement 100 par le nombre de colonnes dont vous avez besoin, puis vous utilisez ce nombre à la place des 4 instances de width: 12.5%; dans le code ci-dessus (évidemment, n'oubliez pas de mettre à jour les noms de classe avec le numéro que vous utilisez).
Par exemple, si vous avez besoin d’une mise en page à 7 colonnes, vous utiliseriez le width: 14.28571428571429% absurdement long à la place de ces 4 instances, vous changeriez le nom de votre classe en .col-*-7r et vous pourrez ensuite déposer le nom de la classe où vous le souhaitez.
Ajoutez un style comme celui-ci dans la feuille de style d'amorçage, style.css:
.col-8{
width: 12.5%;
}
Ajoutez-le ensuite à votre code HTML.
<div class="row">
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
</div>
J'ai eu le même problème et suis allé 4 colonnes, chacune contenant 2 colonnes imbriquées.
Vous pouvez suivre ces étapes pour obtenir 8 colonnes dans le bootstrap.
<!-- 8 Column -->
<div class="8-column">
<!-- Container -->
<div class="container">
<!-- Parent row -->
<div class="row">
<!-- 1st parent column -->
<div class="col-md-3">
<!-- Child row -->
<div class="row">
<!-- 1st Child Column -->
<div class="col-md-6">
</div>
<!-- /1st Child Column -->
<!-- 2nd Child Column -->
<div class="col-md-6">
</div>
<!-- /2nd Child Column -->
</div>
<!-- Child row -->
</div>
<!-- /1st parent column -->
<!-- 2nd parent column -->
<div class="col-md-3">
<!-- Child row -->
<div class="row">
<!-- 1st Child Column -->
<div class="col-md-6">
</div>
<!-- /1st Child Column -->
<!-- 2nd Child Column -->
<div class="col-md-6">
</div>
<!-- /2nd Child Column -->
</div>
<!-- Child row -->
</div>
<!-- /2nd parent column -->
<!-- 3rd parent column -->
<div class="col-md-3">
<!-- Child row -->
<div class="row">
<!-- 1st Child Column -->
<div class="col-md-6">
</div>
<!-- /1st Child Column -->
<!-- 2nd Child Column -->
<div class="col-md-6">
</div>
<!-- /2nd Child Column -->
</div>
<!-- Child row -->
</div>
<!-- /3rd parent column -->
<!-- 4th parent column -->
<div class="col-md-3">
<!-- Child row -->
<div class="row">
<!-- 1st Child Column -->
<div class="col-md-6">
</div>
<!-- /1st Child Column -->
<!-- 2nd Child Column -->
<div class="col-md-6">
</div>
<!-- /2nd Child Column -->
</div>
<!-- Child row -->
</div>
<!-- /4th parent column -->
</div>
<!-- /Parent row -->
</div>
<!-- /Container -->
</div>
<!-- /8 Column -->
Pour une grille de 8 colonnes, il n'est pas nécessaire de personnaliser css ou html.
Créez ou copiez simplement ceci:
<div class="col-md-6">
<div class="col-md-3">1</div>
<div class="col-md-3">2</div>
<div class="col-md-3">3</div>
<div class="col-md-3">4</div>
</div>
<div class="col-md-6">
<div class="col-md-3">5</div>
<div class="col-md-3">6</div>
<div class="col-md-3">7</div>
<div class="col-md-3">8</div>
</div><div class="row">
<div class="col-xs-6 col-md-6 col-sm-6">
<div class="row">
<div class="col-xs-12 col-md-3 col-sm-3">
<div class="premiumAtLifeRightBorder">
<p><b>Make</b></p>
<p class="marginTop20">Nissan</p>
</div>
</div>
<div class="col-xs-12 col-md-3 col-sm-3">
<div class="premiumAtLifeRightBorder">
<p><b>Model</b></p>
<p class="marginTop20">Tiara-5</p>
</div>
</div>
<div class="col-xs-12 col-md-3 col-sm-3">
<div class="premiumAtLifeRightBorder">
<p><b>Engine no</b></p>
<p class="marginTop20">102354</p>
</div>
</div>
<div class="col-xs-12 col-md-3 col-sm-3">
<div class="premiumAtLifeRightBorder">
<p><b>Chassis no</b></p>
<p class="marginTop20">2114-14</p>
</div>
div>
</div>
</div>
<div class="col-xs-6 col-md-6 col-sm-6">
<div class="row">
<div class="col-xs-12 col-md-3 col-sm-3">
<div class="premiumAtLifeRightBorder">
<p><b>Mfg Year</b></p>
<p class="marginTop20">2016</p>
</div>
</div>
<div class="col-xs-12 col-md-3 col-sm-3">
<div class="premiumAtLifeRightBorder">
<p><b>Seats</b></p>
<p class="marginTop20">5</p>
</div>
</div>
<div class="col-xs-12 col-md-3 col-sm-3">
<div class="premiumAtLifeRightBorder">
<p><b>Body Type</b></p>
<p class="marginTop20">Sedan</p>
</div>
</div>
<div class="col-xs-12 col-md-3 col-sm-3">
<div>
<p><b>CC</b></p>
<p class="marginTop20">3900</p>
</div>
</div>
</div>
</div>
</div>