web-dev-qa-db-fra.com

Bootstrap 3 taille de gouttière

Je viens tout juste de commencer à travailler avec bootstrap) et je ne sais pas comment atteindre mon objectif.

Je voudrais que les gouttières soient toutes égales, comme dans cette image:

enter image description here

par défaut, ils ressemblent à ceci, les gouttières verticales entre les colonnes (indiquées en bleu) sont le double des gouttières horizontales et extérieures:

enter image description here

Toute aide sur la meilleure façon de résoudre ce problème serait probablement appréciée.

twitter-bootstraptwitter-bootstrap-3gutter
29
Billy

essayer:

.row {
    margin-left: 0;
    margin-right: 0;
}

Chaque colonne a un rembourrage de 15 px des deux côtés. Ce qui fait une gouttière entre 30 px. Dans le cas de sm-grid, votre classe de conteneur aura 970px (((940px + @ grid-Gutter-width))). Chaque colonne a une largeur de 940/12. La résultante @ grid-Gutter-width/2 des deux côtés de la grille sera masquée avec une marge négative de - 15px ;. En annulant cette marge gauche négative, définissez une gouttière de 30 px des deux côtés de la grille. Cette gouttière est construite avec un remplissage de 15 pixels de la colonne + 15 pixels d'espace de grille au repos.

mise à jour

En réponse à la réponse de @ElwoodP, considérons le code suivant:

<div class="container" style="background-color:darkblue;">  
<div class="row" style="background-color:yellow;">
  <div class="col-md-9" style="background-color:green;">
    <div style="background-color:lightblue;">div 1: .col-md-9</div>
    <div class="row" style="background-color:orange;">
      <div class="col-md-6" style="background-color:red;">
        <div style="background-color:lightblue;">div 2: .col-md-6</div>
      </div>
      <div class="col-md-6" style="background-color:red;">
        <div style="background-color:lightblue;">div 2: .col-md-6</div>
      </div>
    </div>
  </div>  
  <div class="col-md-3" style="background-color:green;">
    <div style="background-color:lightblue;">div 1: .col-md-3</div>
  </div>      
</div>
</div>

Dans le cas de l'imbrication, la manipulation de la classe .row influence en effet la sous-grille. Bon ou faute dépend de vos attentes/exigences pour le sous-réseau. Changer la marge de la .row ne cassera pas la sous-grille.

défaut:

enter image description here

marge de la .row classe

avec:

.row {
    margin-left: 0;
    margin-right: 0;
}

enter image description here

rembourrage de la .container classe

avec:

.container {
    padding-left:30px;
    padding-right:30px;
}

enter image description here

Notez que les sous-réseaux ne doivent pas être placés dans un .container classe.

19
Bass Jobsen

Je ne pense pas que la réponse de Bass soit correcte. Pourquoi toucher les marges des lignes? Ils ont une marge négative pour compenser le remplissage de la colonne pour les colonnes sur le bord de la ligne. Jouer avec cela cassera toutes les lignes imbriquées.

La réponse est simple, il suffit de rendre le remplissage du conteneur égal à la taille de la gouttière:

par exemple pour le bootstrap par défaut:

.container {
    padding-left:30px;
    padding-right:30px;
}

http://jsfiddle.net/3wBE3/61/

9
ElwoodP

Vous pouvez conserver le comportement par défaut (avec Gutter) et ajouter une classe à votre feuille de style CSS pour des tâches similaires à la vôtre:

.no-Gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

Et voici comment l’utiliser dans votre code HTML:

<div class="row no-Gutter">
    <div class="col-md-4">
        ...
    </div>
    <div class="col-md-4">
        ...
    </div>
    <div class="col-md-4">
        ...
    </div>
</div>
8
Zod

Face à ce problème, j’ai ajouté l’ajout suivant à ma feuille de style css:

#mainContent .container {
    padding-left:16px;
    padding-right:16px;
}
  #mainContent .row {
    margin-left: -8px;
    margin-right: -8px;
}

  #mainContent .col-xs-1, #mainContent .col-sm-1, #mainContent .col-md-1, #mainContent .col-lg-1, #mainContent .col-xs-2, #mainContent .col-sm-2, #mainContent .col-md-2, #mainContent .col-lg-2, #mainContent .col-xs-3, #mainContent .col-sm-3, #mainContent .col-md-3, #mainContent .col-lg-3, #mainContent .col-xs-4, #mainContent .col-sm-4, #mainContent .col-md-4, #mainContent .col-lg-4, #mainContent .col-xs-5, #mainContent .col-sm-5, #mainContent .col-md-5, #mainContent .col-lg-5, #mainContent .col-xs-6, #mainContent .col-sm-6, #mainContent .col-md-6, #mainContent .col-lg-6, #mainContent .col-xs-7, #mainContent .col-sm-7, #mainContent .col-md-7, #mainContent .col-lg-7, #mainContent .col-xs-8, #mainContent .col-sm-8, #mainContent .col-md-8, #mainContent .col-lg-8, #mainContent .col-xs-9, #mainContent .col-sm-9, #mainContent .col-md-9, #mainContent .col-lg-9, #mainContent .col-xs-10, #mainContent .col-sm-10, #mainContent .col-md-10, #mainContent .col-lg-10, #mainContent .col-xs-11, #mainContent .col-sm-11, #mainContent .col-md-11, #mainContent .col-lg-11, #mainContent .col-xs-12, #mainContent .col-sm-12, #mainContent .col-md-12, #mainContent .col-lg-12 
{
    padding-left: 8px;
    padding-right: 8px;
}

Cela remplace le style par défaut bootstrap et fait en sorte que les côtés gauche et droit et la gouttière aient la même largeur.

2
user1158039

Ajoutez ces classes auxiliaires à stylesheet.less (vous pouvez utiliser http://less2css.org/ pour les compiler en CSS)

.row.Gutter-0 {
    margin-left: 0;
    margin-right: 0;
    [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }
}

.row.Gutter-10 {
    margin-left: -5px;
    margin-right: -5px;
    [class*="col-"] {
        padding-left: 5px;
        padding-right: 5px;
    }
}

.row.Gutter-20 {
    margin-left: -10px;
    margin-right: -10px;
    [class*="col-"] {
        padding-left: 10px;
        padding-right: 10px;
    }
}

Et voici comment l’utiliser dans votre code HTML:

<div class="row Gutter-0">
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
</div>

<div class="row Gutter-10">
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
</div>

<div class="row Gutter-20">
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
</div>
2
Mohammad Dayeh

Je suis coincé avec ce problème, ma solution était de créer un mixin qui me permet de spécifier dans SCSS la taille réelle de gouttière que je veux ...

Solution: 1) 

@mixin add-Gutter($size) {
    margin-right: -$size;
    margin-left: -$size;

    > [class*="col-"] {
        padding-right: $size;
        padding-left: $size;
    }
}



.that-special-row{
    @include add-Gutter(7px);
}

Et pour l'utiliser ...

<div class="row that-special-row"></div>

La solution actuelle est venue de ce numéro mentionné sur github, qui, je crois, résout le même problème.

Solution: 2)

Une autre solution serait simplement de créer votre classe CSS personnalisée

.small-gutters {
    margin-right: -10px;
    margin-left: -10px;
    > [class*="col-"] {
      padding-right: 10px;
      padding-left: 10px;
    }
  }

J'espère que ça t'as aidé!

2
etiennejcharles

Bootstrap 3 introduit row-no-gutters dans la v3.4.0

https://getbootstrap.com/docs/3.4/css/#grid-remove-gutters

Vous pouvez créer une rangée sans gouttières et avoir une rangée avec des gouttières à l'intérieur pour les pièces que vous voulez avoir une gouttière.

0
dyve

Si vous utilisez sass dans votre propre projet, vous pouvez remplacer la taille par défaut bootstrap) en copiant les variables sass du fichier _variables.scss du bootstrap dans votre propre fichier sass, quelque part, comme:

// Grid columns
//
// Set the number of columns and specify the width of the gutters.
$grid-Gutter-width-base:     50px !default;
$grid-Gutter-widths: (
        xs: $grid-Gutter-width-base,
        sm: $grid-Gutter-width-base,
        md: $grid-Gutter-width-base,
        lg: $grid-Gutter-width-base,
        xl: $grid-Gutter-width-base
) !default;

Maintenant, vos gouttières seront 50px au lieu de 30px. Je trouve que c'est la méthode la plus propre pour ajuster la taille de la gouttière.

0
user33560

@Bass Jobsen et @ElwoodP ont tenté de répondre à cette question en sens inverse - en donnant aux marges extérieures la même taille DOUBLE que les gouttières. Le PO (et moi aussi) cherchait un moyen d’avoir une gouttière de taille UNIQUE partout. Voici les ajustements CSS corrects pour le faire:

.row {
    margin-left: -7px;
    margin-right: -7px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    padding-left: 7px;
    padding-right: 7px;
}
.container {
    padding-left: 14px;
    padding-right: 14px;
}

Cela laisse un 14px Gouttière et marge extérieure à tous les endroits.

0
Michael Yaeger