web-dev-qa-db-fra.com

Réduire la gouttière (30 pixels par défaut) sur des périphériques plus petits dans Bootstrap3?

Dans le bootstrap 3, la gouttière est définie à 30px (15px de chaque côté d'une colonne). Le problème que je me pose est que, par exemple, si je rétrécis mon écran pour qu’il devienne minuscule, les gouttières finissent par être plus larges que les colonnes elles-mêmes, comme on le voit ci-dessous (bleu plus foncé = colonne, bleu plus clair = Gouttière).

enter image description here

Pouvez-vous modifier la largeur de gouttière de certains états de résolution? (mobile, tablette, etc.)

twitter-bootstraptwitter-bootstrap-3
23
user2762294

La gouttière est construite par un remplissage gauche et droit, vous pouvez utiliser des requêtes de média pour changer cela en fonction de la taille de votre écran:

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) 
{ 
    div[class^="col"]{padding-left:5px; padding-right:5px;}
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) 
{   
    div[class^="col"]{padding-left:10px; padding-right:10px;}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) 
{   
    /*default so you don't need this*/
    div[class^="col"]{padding-left:15px; padding-right:15px;}
}

Notez également cette question: Bootstrap 3 Gutter Size . Vous devez utiliser cette option lorsque vous souhaitez également modifier la gouttière "visuelle" des deux côtés de la grille. Dans ce cas, vous devrez également définir le remplissage de la classe .container à la taille de votre gouttière. être.

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) 
{   
    /*default so you don't need this*/
    div[class^="col"]{padding-left:85px; padding-right:85px;}
    .container{padding-left:85px; padding-right:85px;}
    .row {
    margin-left: 0;
    margin-right: 0;
    }
}
25
Bass Jobsen

Une solution plus robuste utilisant des mixins bootstrap:

@sm-Gutter: 10px;
@md-Gutter: 50px;
@lg-Gutter: 100px;

.my-container {
  @media (min-width: @screen-sm-min) {
    width: @container-sm;
    .container-fixed(@Gutter: @sm-Gutter);
  }
  @media (min-width: @screen-md-min) {
    width: @container-md;
    .container-fixed(@Gutter: @md-Gutter);
  }
  @media (min-width: @screen-lg-min) {
    width: @container-lg;
    .container-fixed(@Gutter: @lg-Gutter);
  }
}

.my-row {
  @media (min-width: @screen-sm-min) {
    .make-row(@Gutter: @sm-Gutter);
  }
  @media (min-width: @screen-md-min) {
    .make-row(@Gutter: @md-Gutter);
  }
  @media (min-width: @screen-lg-min) {
    .make-row(@Gutter: @lg-Gutter);
  }
}

.my-4-col {
  @media (min-width: @screen-sm-min) {
    .make-sm-column(4, @sm-Gutter);
  }
  @media (min-width: @screen-md-min) {
     .make-md-column(4, @md-Gutter);
  }
  @media (min-width: @screen-lg-min) {
     .make-lg-column(4, @lg-Gutter);
  }
}
6
alberto-bottarini

Solution simple utilisant le mixin LESS et la classe "col":

.reduce-Gutter(@size: 5px) {
    .row {
        .make-row(@size);
    }
    .row .col:first-child,
    .row .col:last-child { 
        padding-right: @size;
        padding-left: @size;
    }
}
4
jhvaras

J'utilise une taille de gouttière standard (30 pixels) sauf sur les petits appareils où ma gouttière est de 6 pixels

@media (max-width: $screen-sm-min - 1) {
    $grid-Gutter-width: 6px; // redefining

    // also redefine $navbar-padding-horizontal in the scope because it depend on $grid-Gutter-width
    $navbar-padding-horizontal: floor(($grid-Gutter-width / 2));

    @import "../bootstrap/bootstrap/forms";
    @import "../bootstrap/bootstrap/grid";
    @import "../bootstrap/bootstrap/navbar";
}
1
Julien

J'ai essayé de réécrire Bootstrap mixin afin d'avoir la moitié de la grille normale-Gutter pour la largeur XS. Semble travailler bien.

.make-xs-column(@columns; @Gutter: @grid-Gutter-width) {   
    @media(max-width: @screen-xs-min) {
        padding-left:  (@Gutter / 4);
        padding-right: (@Gutter / 4);
    };
}
.make-row(@Gutter: @grid-Gutter-width) {
    @media(max-width: @screen-xs-min) {
        margin-left:  (@Gutter / -4);
        margin-right: (@Gutter / -4);
    }
}

.container-fixed() {
    @media(max-width: @screen-xs-min) {
        padding-left:  (@grid-Gutter-width / 4);
        padding-right: (@grid-Gutter-width / 4);
    }
}
0
Alex