Comment faire pour Modifier la valeur par Défaut de Bootstrap Grille Fluide, 12 Colonne Largeur de Gouttière
Je suis à la recherche pour savoir si il y a simple solution connue pour changer la gouttière avec le fluide 12 par défaut de la grille de bootstrap système (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é. De même avec Sass.
Veuillez noter qu'il est parfaitement acceptable de modifier la largeur de gouttière, par la moitié ou un quatrième, par exemple si cela peut rendre les choses plus simples.
Les objectifs suivants doivent être atteints:
- Doit être en mesure de mettre à jour bootstrap dans l'avenir. Cela signifie de ne pas éditer le réel des fichiers d'amorçage.
- Fonctionnalité devrait rester pour tous les autres objets.
- Doit être simple. Moins de 10 lignes de CSS. Par exemple, l'ajout d'une classe ou quelque chose.
J'ai cherché tout au long de Débordement de Pile et n'ont aucune idée de comment je peut faire quelque chose comme cela. Au meilleur de ma connaissance, téléchargement personnalisé de Bootstrap ne s'affiche personnalisée de gouttière largeurs pour les non-grilles fluides. J'ai codé mon propre système de grille fluide avant, donc je comprends les maths, mais je suis inquiet, il peut y avoir des conséquences, et il serait utile si les problèmes connus de la classe des remplacements pourraient être partagées.
Je promets de donner le crédit où il est dû.
Mise à JOUR:
De changer le moins de variables comme décrit dans le Yoda de la réponse est le chemin à parcourir. Quelqu'un a une expérience de modification de ces variables? Par exemple, je crois que les variables qui doivent être modifiés sont les suivants:
//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 fait-on pour changer quelque chose de ce genre? Peut-être:
@fluidGridGutterWidth768: percentage(1.5); Si quelqu'un l'a fait avant, j'aimerais avoir une pousser dans la bonne direction.
- Si vous avez une réponse, merci de modifier dans l'existant accepté de répondre; ou écrire votre propre réponse. Les réponses ne doivent pas être placés dans la question (c'est pourquoi on les appelle des questions).
Vous devez vous connecter pour publier un commentaire.
La façon la plus simple est probablement d'utiliser l'Personnalisable télécharger que Twitter Bootstrap offre. Changer le @fluidGridGutterWidth variable pour répondre à vos besoins dans le formulaire. Télécharger le moins de fichiers à partir d'ici. Vous pouvez accéder à la variable.moins de fichiers à partir de l'github projet "bootstrap" et ensuite modifier ce bout de code:
Je pensais que tu avais accès à moins de fichiers, d'abord, puis j'ai réalisé que vous êtes à l'aide de la mesure de gui sur le site. Il suffit de télécharger le moins de fichiers, et apportez vos modifications. Ensuite compiler le moins de fichiers pour vous donner un fichier css ou utiliser le moins de développement. Vous pouvez utiliser les css ou min.css pour le déploiement.
Je pense que vous pourriez être sur la pensée. Le problème avec la modification de la MOINS de variables est que cela va changer pour toutes les gouttières. Donc, si j'aime le 15px gouttière pour l'organisation sur l'ensemble de la mise en page, mais veulent la gouttière à être 5px pour un formulaire à l'intérieur de cette grille, ça ne marchera pas.
Il suffit de créer 2 classes css pour remplacer les zones que vous souhaitez modifier la gouttière.
S'appliquent à la "ligne" de niveau.
S'appliquent à la "colonne" niveau.
démo: http://jsfiddle.net/tg7Ey/
Je cherchais une solution simple pour résoudre ce problème, trop. Mon objectif était d'utiliser les CSS simple, pas MOINS. Cette réponse est comme tout les autres j'ai trouvé, 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.
La lecture de la documentation, vous trouverez la suite sur la gouttière de la largeur des Colonnes créer des gouttières (écarts entre le contenu de la colonne) par l'intermédiaire de rembourrage. Que le rembourrage est compensée dans les lignes de la première et de la dernière colonne par le biais de marge négative sur .les lignes.
Sur cette base, j'ai essayé le suivant:
À partir de maintenant, la largeur de gouttière n'était que de 2 pixels. Mon prochain problème, c'est que mon but largeur est un nombre impair. Ma solution a été de supprimer les rembourrages et les marges à gauche et à les mettre complètement à droite:
Maintenant, j'ai un de 5 pixels largeur de gouttière.
Je n'ai pas testé ce dans tous les scénarios possibles, vous pouvez utiliser bootstrap. En particulier, vous devez faire attention pour utiliser uniquement la colonne 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 à l'origine de la source de code de bootstrap ou à l'aide d'un MOINS compilateur.