web-dev-qa-db-fra.com

Comment ajuster Gutter in Bootstrap 3 système de grille?

Le nouveau système de grille Bootstrap 3 est excellent. Il est plus puissant pour une conception réactive, quelle que soit la taille de l’écran, et beaucoup plus facile pour une imbrication.

Mais j'ai un problème que je ne pouvais pas comprendre. Comment puis-je ajouter un espace précis entre les colonnes? Disons que j'ai un conteneur 960px, 3 colonnes à 310px et 2 gouttières à 15px entre 3 colonnes. Comment je fais ça?

marginpaddingtwitter-bootstrap-3grid-systemgutter
28
Darren Li

Vous pouvez créer une classe CSS pour cela et l'appliquer à vos colonnes. Puisque la gouttière (espacement entre les colonnes) est contrôlée par un remplissage dans Bootstrap 3, ajustez le remplissage en conséquence:

.col {
  padding-right:7px;
  padding-left:7px;
}

Démo: http://bootply.com/9347

[~ # ~] éditer [~ # ~] Si vous voulez seulement l'espacement entre les colonnes, vous pouvez tout sélectionner cols sauf premier et dernier comme ça ..

.col:not(:first-child,:last-child) {
  padding-right:7px;
  padding-left:7px;
}

Mise à jour Bootply

Pour Bootstrap 4 voir: Supprimer l'espace de gouttière pour un div spécifique uniquement)

16
Zim

Pour définir une grille à 3 colonnes, vous pouvez utiliser le personnaliseur ou télécharger le jeu de sources vos moins de variables et recompiler.

Pour en savoir plus sur la grille et les largeurs de colonnes/gouttières, veuillez également lire:

Dans le cas d’un conteneur de 960px, considérez la grille moyenne (voir aussi: http://getbootstrap.com/css/#grid ). Cette grille aura une largeur maximale de conteneur de 970px. Lors du réglage de @grid-columns:3; et réglage @grid-Gutter-width:15px; in variables.less vous obtiendrez:

15px | 1st column (298.33) | 15px | 2nd column (298.33) |15px | 3th column (298.33) | 15px
6
Bass Jobsen

(Publié au nom de l'OP).

Je crois que je l'ai compris.

Dans mon cas, j'ai ajouté [class*="col-"] {padding: 0 7.5px;};.

Puis ajouté .row {margin: 0 -7.5px;}.

Cela fonctionne plutôt bien, sauf qu'il y a une marge de 1px des deux côtés. Alors je fais juste .row {margin: 0 -7.5px;} à .row {margin: 0 -8.5px;}, alors cela fonctionne parfaitement.

Je n'ai aucune idée pourquoi il y a une marge de 1px. Peut-être que quelqu'un peut l'expliquer?

Voir l'exemple que j'ai créé:

démo
Code

2
halfer