Comment ajuster la gouttière dans le Bootstrap 3 système de grille?

La nouvelle Bootstrap 3 système de grille est grande. Il est plus puissant pour la conception répond à toutes les tailles d'écran, et beaucoup plus facile pour imbriqués.

Mais j'ai un problème je ne pouvais pas comprendre. Comment puis-je ajouter de la précision de l'écart entre les colonnes? Dire que j'ai conteneur de 960px, 3 colonnes à 310px et 2 gouttières à 15px entre 3 colonnes. Comment dois-je faire?

  • Cela semble intéressante. Le premier résultat que j'aime. Plus il suffit de ne pas afficher le rembourrage qui rend le texte stand contre le bord. J'essaie de reproduire votre réponse à l'aide de jsfiddle. jsfiddle.net/0ddum192 Mais je n'ai pas de gouttière. Quelqu'un sait ce qui ne va pas?
InformationsquelleAutor Darren Li | 2013-11-11
  1. 16

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

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

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

    MODIFIER Si vous souhaitez uniquement l'espacement entre les colonnes, vous pouvez sélectionner toutes les colonnes sauf le premier et le dernier comme ça..

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

    Mise À Jour Bootply

    Pour Bootstrap 4 voir: Retirer la gouttière de l'espace pour un div seulement

    • Merci pour la réponse rapide.
    • Mais de cette façon, il va ajouter un rembourrage pour le premier enfant. Ce n'est pas exactement ce que je veux. Ce que je pense est, je peux peut-être ajouter le récipient 975px, et ajouter un padding-right: 15px; pour .col. Lorsque l'écran de changement de taille, je dois supprimer padding-right: 15px;. Aussi, si j'ai d'autres éléments sur la page. J'ai besoin d'ajouter cette padding-right: 15px; et le retirer lors de la taille de l'écran de changement. Je ne suis pas sûr si c'est la meilleure façon de gérer les colonnes avec la gouttière dans le Bootstrap 3.
    • Je ne pense pas que vous avez besoin de mentionner d'abord l'enfant ou le dernier enfant que tous les éléments de colonne dans le bootstrap 3 adhèrent à la même marge ou de rembourrage sur la gauche et le côté droit.
    InformationsquelleAutor Zim
  2. 6

    De définir un 3 colonne de la grille, vous pouvez utiliser les customizer ou de télécharger le jeu de la source de votre moins de variables et de recompiler.

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

    Dans votre cas avec un conteneur de 960px considérer le milieu de la grille (voir aussi: http://getbootstrap.com/css/#grid). Cette grille aura un conteneur max largeur de 970px.
    Lors de la configuration de @grid-columns:3; et réglage @grid-gutter-width:15px; dans des variables.moins vous aurez:

    15px | 1st column (298.33) | 15px | 2nd column (298.33) |15px | 3th column (298.33) | 15px
    • +1 le Téléchargement du MOINS, en ce qui concerne l'Amorçage d'3.3.6, est peut-être le moyen le plus efficace pour ce faire. Qui veut vraiment aller dans une .Fichier CSS et de modifier manuellement un nombre x de Bootstraps sélecteurs??? et les seuls à le faire à nouveau quand un autre projet "Bootstrap" est-elle nécessaire? Permettre à MOINS de faire tout le levage lourd.
    InformationsquelleAutor Bass Jobsen
  3. 2

    (Publié sur le nom de l'OP).

    Je crois que j'ai tout compris.

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

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

    Cela fonctionne assez bien, sauf qu'il n'y est 1px marge sur les deux côtés. Donc, je viens de faire .row {margin: 0 -7.5px;} à .row {margin: 0 -8.5px;}, il fonctionne parfaitement.

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

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

    Démo

    Code

    • Lorsque vous êtes à l'imbrication des lignes ou vous avez des lignes avec une ou deux colonnes, vous devez être un peu plus précis: div[class^="col-"]:not(:first-child) { padding-left:7px; } div[class^="col-"]:not(:last-child) { padding-right:7px; }
    InformationsquelleAutor