Comment utiliser bootstrap avec 16 ou 24 colonnes
J'ai besoin d'aide pour configurer Bootstrap 2.0.4 sur 16 ou 24 colonnes au lieu des 12 colonnes par défaut. Je ne comprends pas ce que je fais de mal. J'ai essayé l'option de personnalisation sur le site de démarrage et j'ai essayé de modifier les variables de grille dans les variables. Fichier .less et recompilation bootstrap.less en utilisant Crunch mais pour les deux essais, j'ai toujours le même résultat .il reste 12 colonnes !!! quand j'essaie de définir un div pour être span12 il faut encore tout l'écran?
Quelqu'un peut-il me guider vers ce qui ne va pas ou si quelqu'un peut générer des versions à 16 et 24 colonnes et me les envoyer, ce serait parfait
Cette méthode concerne une version plus ancienne de Bootstrap - Version 2.3.1
Cliquez sur ce lien pour personnaliser bootstrap: http://Twitter.github.com/bootstrap/customize.html
Vous trouverez des exemples comme celui-ci. Modifiez les paramètres pour répondre à vos besoins.
16 Grid system with Gutter
@gridColumns: 16
@gridColumnWidth: 45px
@gridGutterWidth: 15px
@gridColumnWidth1200: 52.5px
@gridGutterWidth1200: 22.5px
@gridColumnWidth768: 31.5px
@gridGutterWidth768: 15px
16 Grid system without Gutter
@gridColumns: 16
@gridColumnWidth: 60px
@gridGutterWidth: 0px
@gridColumnWidth1200: 75px
@gridGutterWidth1200: 0px
@gridColumnWidth768: 46.5px
@gridGutterWidth768: 0px
24 Grid system with Gutter
@gridColumns: 24
@gridColumnWidth: 30px
@gridGutterWidth: 1px
@gridColumnWidth1200: 35px
@gridGutterWidth1200: 15px
@gridColumnWidth768: 21px
@gridGutterWidth768: 10px
24 Grid system without Gutter
@gridColumns: 24
@gridColumnWidth: 40px
@gridGutterWidth: 0px
@gridColumnWidth1200: 50px
@gridGutterWidth1200: 0px
@gridColumnWidth768: 31px
@gridGutterWidth768: 0px
Pour 24 colonnes, vous pouvez diviser div principale
<div class="col-md-12">
<div class="col-md-6">
<div class="col-md-1">nothing</div>
<div class="col-md-1">nothing</div>
<div class="col-md-1">nothing</div>
<div class="col-md-1">nothing</div>
<div class="col-md-1">nothing</div>
<div class="col-md-1">nothing</div>
<div class="col-md-1">nothing</div>
<div class="col-md-1">nothing</div>
<div class="col-md-1">nothing</div>
<div class="col-md-1">nothing</div>
<div class="col-md-1">nothing</div>
<div class="col-md-1">nothing</div>
</div>
<div class="col-md-6">12 here</div>
</div>
Assez simple pour modifier en moins - http://Twitter.github.com/bootstrap/scaffolding.html#gridCustomization
Vous voudrez changer les variables à ce que vous voulez -
par exemple.
@gridColumns: 24
@gridColumnWidth: 30px
@gridGutterWidth: 10px
Si vous utilisez une grille de fluides, vous voudrez également modifier ces variables proportionnellement, sinon span12 occupera tout de même 100% de la largeur et span24 occupera 200%.
@fluidGridColumnWidth
@fluidGridGutterWidth
Comme indiqué:
Comment personnaliser
Modifier la grille signifie changer les trois variables @ grid * et recompiler Bootstrap. Modifiez les variables de la grille dans variables.less et utilisez l’une des quatre méthodes documentées pour la recompilation. Si vous ajoutez plus de colonnes, veillez à ajouter le CSS pour celles de grid.less.
Vous pouvez modifier les variables et télécharger le nouveau fichier css ici: http://Twitter.github.com/bootstrap/download.html#variables
Voici un exemple compilé qui devrait fonctionner pour 16 colonnes (non testé, laissez-moi savoir comment cela fonctionne): https://s3.amazonaws.com/intenex/bootstrap16columns.Zip
Edit: la création de grilles avec un nombre personnalisé de colonnes a été restaurée et peut être effectuée sur la page customization de Bootstrap .
Pour des raisons inconnues de moi, la dernière version de Bootstrap (3.0.0/1) ne vous permet pas de créer une grille différente de 12 colonnes, ce qui est bien dommage.
Ce que nous pouvons faire actuellement, et qui permettra à son tour de créer davantage de packages d’amorçage personnalisés, est de configurer votre propre personnalisateur Bootstrap.
Edit: je viens d'essayer. L'installation de toutes les dépendances s'est très bien déroulée, tout en respectant les consignes de la page Docs GitHub.
Exemple généré Grille de 24 colonnes
Editor required inserting some code along with jsfiddle link. There's no point in pasting anything though.
16 colonne
960px
45px * 16 = 720 colonne
15px * 16 = 240 gouttières
1200px
53px * 16 = 848 colonnes
22px * 16 = 352 gouttière
768px
33px * 16 = 528 colonne
15px * 16 = 240 gouttières
Mise à jour 2018
Revisiter cette question pour la dernière version de Bootstrap 4. Maintenant que Bootstrap 4 est une boîte souple et comprend les colonnes de mise en forme automatique , il est facile de créer des mises en page avec un nombre quelconque de n colonnes .. .
16 colonnes
<div class="row">
<div class="col">
1
</div>
<div class="col">
2
</div>
<div class="col">
... to 16
</div>
</div>
24 colonnes
<div class="row">
<div class="col">
1
</div>
<div class="col">
2
</div>
<div class="col">
... to 24
</div>
</div>
Démo: https://www.codeply.com/go/4sQGt2qKyr
Voir aussi: N le nombre de colonnes dans Bootstrap 4
Vous pouvez remplacer l'attribut width avec un pourcentage comme ceci:
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
Il maintiendra même les capacités réactives.
Set 24 Columns:
960
35px Column
5px Gutter
1200
40px Column
10px Gutter
768
29px Column
3px Gutter
Voici un moyen simple et rapide de créer 16 colonnes avec imbrication.
.no-padding {
padding-left: 0 !important;
padding-right: 0 !important;
}<div class="row">
<div class="col-md-3 no-padding">
<div class="col-md-3">
col
</div>
<div class="col-md-3">
col
</div>
<div class="col-md-3">
col
</div>
<div class="col-md-3">
col
</div>
</div>
<div class="col-md-3 no-padding">
<div class="col-md-3">
col
</div>
<div class="col-md-3">
col
</div>
<div class="col-md-3">
col
</div>
<div class="col-md-3">
col
</div>
</div>
<div class="col-md-3 no-padding">
<div class="col-md-3">
col
</div>
<div class="col-md-3">
col
</div>
<div class="col-md-3">
col
</div>
<div class="col-md-3">
col
</div>
</div>
<div class="col-md-3 no-padding">
<div class="col-md-3">
col
</div>
<div class="col-md-3">
col
</div>
<div class="col-md-3">
col
</div>
<div class="col-md-3">
col
</div>
</div>
</div>
<!-- row -->J'utilise les colonnes de la grille 30 pour mon projet (les grilles 24 et 100 sont également disponibles)
https://github.com/zirafa/bootstrap-grid-only
certaines personnalisations peuvent être nécessaires selon vos besoins