web-dev-qa-db-fra.com

Comment changer la valeur par défaut Bootstrap Fluid Grid 12 Column Gutter Gutter Width

Je cherche à savoir s'il existe une solution simple connue pour changer la gouttière sur la grille fluide 12 par défaut bootstrap system (2.3 .0).

Je ne connais pas MOINS mais si telle est la réponse, veuillez également décrire comment changer. La même chose avec Sass.

Veuillez noter qu'il est parfaitement acceptable de modifier la largeur de la gouttière, de moitié ou n quart, par exemple si cela peut rendre les choses plus simples.

Les objectifs suivants doivent être atteints:

  1. Doit être capable de mettre à jour bootstrap à l'avenir. Cela signifie ne pas modifier les fichiers bootstrap réels).
  2. La fonctionnalité doit rester pour tous les autres objets.
  3. Doit être simple. Moins de 10 lignes de CSS. Par exemple, une classe ajoutée ou quelque chose.

J'ai cherché dans Stack Overflow et je n'ai toujours aucune idée de la façon dont je peux faire quelque chose comme ça. Au meilleur de ma compréhension, le téléchargement d'un Bootstrap personnalisé ne rend que les largeurs de gouttière personnalisées pour les grilles non fluides. J'ai codé mon propre système de grille fluide auparavant, donc je comprendre les mathématiques, 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ù c'est dû.

MISE À JOUR:

Changer les variables moins comme décrit dans la réponse de Yoda est la voie à suivre. Quelqu'un at-il une expérience dans la modification de ces variables moins? Par exemple, je pense 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 changer quelque chose comme ça? Peut-être:

@fluidGridGutterWidth768:      percentage(1.5);

Si quelqu'un l'a déjà fait auparavant, j'apprécierais de faire un pas dans la bonne direction.

csstwitter-bootstrapsassless
25
Raphael Rafatpanah

La façon la plus simple est probablement d'utiliser le téléchargement personnalisable que Twitter Bootstrap fournit. Modifiez la variable @fluidGridGutterWidth pour l'adapter à vos besoins dans le formulaire. Téléchargez le moins de fichiers d'ici . Vous pouvez accéder au fichier variable.less à partir du projet github bootstrap puis changer ce morceau de code:

    // Fluid grid
// -------------------------
@fluidGridColumnWidth:    percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth:    percentage(@gridGutterWidth/@gridRowWidth); // <= this one

Au début, je pensais que vous aviez accès à moins de fichiers, puis j'ai réalisé que vous utilisiez l'interface graphique personnalisée sur le site Web. Téléchargez simplement le moins de fichiers et apportez vos modifications. Compilez ensuite moins de fichiers pour vous donner un fichier css ou utilisez moins pour le développement. Vous pouvez utiliser css ou min.css pour le déploiement.

11
Siddharth Pandey

Je pense que vous avez peut-être trop réfléchi. Le problème avec le changement des variables MOINS est qu'il le changera pour toutes les gouttières. Donc, si j'aime la gouttière 15px pour organiser la disposition générale, mais que la gouttière soit de 5px pour un formulaire à l'intérieur de cette grille, cela ne fonctionnera pas.

Créez simplement 2 classes css pour remplacer les zones dans lesquelles vous souhaitez modifier la gouttière.

Appliquez cela au niveau "ligne".

.row-5-Gutter{
    margin-left: -5px;
    margin-right: -5px;
}

Appliquez cela au niveau "colonne".

.col-5-Gutter{
    padding-left: 5px;
    padding-right: 5px;
}

démo: http://jsfiddle.net/tg7Ey/

6
Donny V.

Je cherchais également une solution simple à ce problème. Mon objectif était d'utiliser du CSS simple, pas MOINS. Cette réponse comme toutes les autres que j'ai trouvées, basée sur la compilation de MOINS ou sur l'utilisation du compilateur en ligne de bootstrap. J'ai donc essayé de trouver ma propre solution.

En lisant la documentation, vous trouverez les informations suivantes sur la largeur de la gouttière: les colonnes créent des gouttières (espaces entre le contenu des colonnes) via le remplissage. Ce remplissage est décalé dans les lignes de la première et de la dernière colonne via une marge négative sur .rows.

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

À partir de maintenant, la largeur de la gouttière n'était que de 2 pixels. Mon problème suivant était que ma largeur prévue était un nombre impair. Ma solution a été de retirer 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;}

J'ai maintenant une largeur de gouttière de 5 pixels.

Je n'ai pas testé cela dans tous les scénarios possibles, vous pouvez utiliser le bootstrap. En particulier, vous devez faire attention à n'utiliser que des colonnes 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 au code source d'origine de bootstrap ou en utilisant un compilateur LESS.

1
thiscode