Comment changer par défaut Bootstrap fluide Grille 12 colonne gouttière Largeur
Je cherche à savoir s'il existe une solution simple connue pour changer la gouttière avec le fluid Système d'amorçage de grille 12 par défaut (2.3.0).
Je ne suis pas familier avec MOINS, mais si c'est la réponse, veuillez également décrire comment pourrait être changé. La même chose avec Sass.
Veuillez noter qu'il est parfaitement acceptable de changer la largeur de la gouttière, de moitié ou d'un quart , par exemple si cela peut simplifier les choses.
Le les objectifs suivants doivent être atteints:
- doit pouvoir mettre à jour bootstrap à l'avenir. Cela signifie Ne pas éditer les fichiers d'amorçage réels.
- la fonctionnalité doit rester pour tous les autres objets.
- doit être simple. Moins de 10 lignes de CSS. Par exemple, une classe ajoutée ou quelque chose.
J'ai cherché tout au long de Stack Overflow et je n'ai toujours aucune idée de comment je peux faire quelque chose comme ça. Au mieux de ma compréhension, Téléchargement d'un Bootstrap personnalisé rend uniquement les largeurs de gouttières personnalisées pour les grilles non fluides . J'ai déjà codé mon propre système de grille fluide, donc je comprends les maths, mais je crains qu'il puisse y avoir des conséquences et il serait utile que des problèmes connus sur les remplacements de classe puissent être partagés.
Je promets de donner du crédit là où il est dû.
Mise à jour:
Changer les variables less comme décrit dans la réponse de Yoda est la voie à suivre. Est-ce que quelqu'un a une expérience de changer ces moins les variables? Par exemple, je crois que les variables qui doivent être modifiées sont les suivantes:
// Fluid grid
// -------------------------
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);
// 1200px min
@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);
// 768px-979px
@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);
Comment peut-on changer quelque chose comme ça? Peut-être:
@fluidGridGutterWidth768: percentage(1.5);
Si quelqu'un a déjà fait cela, j'apprécierais un coup dans la bonne direction.
3 réponses
Le moyen le plus simple est probablement d'utiliser le téléchargement personnalisable fourni par Twitter Bootstrap. Modifiez la variable @ fluidGridGutterWidth pour répondre à vos besoins dans le formulaire. Téléchargez les fichiers less à partir d'ici . Vous pouvez accéder à la variable.moins de fichier du projet github bootstrap, puis changez ce morceau de code:
// Fluid grid
// -------------------------
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth); // <= this one
Je pensais que vous aviez accès à moins de fichiers au début, puis j'ai réalisé que vous utilisez l'interface graphique personnalisée sur le site. Il suffit de télécharger les fichiers less, et faites vos changements. Ensuite, compilez les fichiers less pour vous donner un fichier css ou utilisez less pour le développement. Vous pouvez utiliser css ou min.CSS pour le déploiement.
Je pense que vous pourriez être trop y penser. Le problème avec le changement des variables moins est qu'il va le changer pour toutes les gouttières. Donc, si j'aime la gouttière 15px pour organiser la mise en page sur l'ensemble, mais que je veux que la gouttière soit 5px pour une forme à l'intérieur de cette grille, cela ne fonctionnera pas.
Il suffit de créer 2 classes css pour remplacer les zones que vous souhaitez modifier la gouttière.
Appliquez ceci au niveau "ligne".
.row-5-gutter{
margin-left: -5px;
margin-right: -5px;
}
Appliquez ceci au niveau "colonne".
.col-5-gutter{
padding-left: 5px;
padding-right: 5px;
}
Je cherchais aussi une solution simple à ce problème. Mon but était d'utiliser des CSS simples, pas moins. Cette réponse comme toute autre que j'ai trouvée, basée sur la compilation de moins ou en utilisant le compilateur en ligne de bootstrap. J'ai donc essayé de trouver ma propre solution.
En lisant la documentation, vous trouverez ce qui suit à propos de la largeur de la gouttière: les colonnes créent des gouttières (espaces entre le contenu de la colonne) via le remplissage. Ce remplissage est décalé dans les lignes pour la première et la dernière colonne via une marge négative sur .rangée.
Sur cette base, j'ai essayé ce qui suit:
.container {padding-left:1px;padding-right:1px;}
.row {margin-left:-1px;margin-right:-1px;}
.row > div {padding-left:1px;padding-right:1px;}
A partir de Maintenant, la largeur de la gouttière n'était que de 2 pixels. Mon prochain problème était, que ma largeur prévue était un nombre impair. Ma solution était de supprimer les rembourrages et les marges à gauche et de les mettre complètement à droite:
.container {padding-left:0;padding-right:5px;}
.row {margin-left:0;margin-right:-5px;}
.row > div {padding-left:0;padding-right:5px;}
Maintenant, j'ai une largeur de gouttière de 5 pixels.
Je n'ai pas testé cela dans tous les scénarios possibles, vous pouvez utiliser bootstrap. Surtout, vous devez faire attention à utiliser uniquement column-div à l'intérieur d'une ligne-div à l'intérieur d'un conteneur div. Mais dans mon cas, c'était une solution très efficace sans toucher le code source d'origine de bootstrap ou en utilisant un compilateur moins.