web-dev-qa-db-fra.com

Dans Bootstrap 4, comment changer $ grid-Gutter-width interne en fonction des points d'arrêt?

Je travaille actuellement sur Bootstrap4 dans SCSS.

Je souhaite modifier la largeur intérieure de la grille $ $ sur smartphone uniquement.

Selon _grid.scss

$grid-columns: 12 !default; $grid-Gutter-width: 30px !default;

Sur le site bootstrap, on sait que:

Tailles de grille, mixins et variables mis à jour. Les gouttières de grille ont maintenant une carte Sass afin que vous puissiez spécifier des largeurs de gouttière spécifiques à chaque point d'arrêt.

Je ne trouve pas la carte et comment cela peut être fait.

twitter-bootstrapsassbootstrap-4gutter
13
Zorkzyd

Cela ressemble à une erreur dans les documents. Il y avait autrefois une carte, mais elle a été supprimée avant la sortie de 4.0.0. Cependant, il serait assez facile d'ajouter cela pour seulement xs avec SASS. Par exemple 5px sur mobile ...

@media (min-width: map-get($grid-breakpoints, xs)) and (max-width: map-get($grid-breakpoints, sm)){
    .row > .col,
    .row > [class*="col-"] {
      padding-right: 5px;
      padding-left: 5px;
    }
}

https://www.codeply.com/go/XgynFzTmGv

1
Zim

Identique à la réponse d'Arajay mais avec une certaine automatisation qui donne la possibilité de choisir une largeur de gouttière spécifique pour chaque point d'arrêt:


/* Specify your own gutters for every breakpoint. I use media-breakpoint-up so to avoid a default width it's better to always include "xs", and then you can do whatever you want */
$grid-Gutter-widths: (
  xs: 10px,
  /* "sm" takes the same width as "xs" automatically */
  md: 20px,
  lg: 30px
);

/* You don't need to change anything below */
@each $grid-breakpoint, $grid-Gutter-width in $grid-Gutter-widths {
  @include media-breakpoint-up($grid-breakpoint) {
    $grid-Gutter-half-width: $grid-Gutter-width / 2;
    .row:not(.no-gutters) {
      margin-right: -$grid-Gutter-half-width;
      margin-left: -$grid-Gutter-half-width;
    }
    .row:not(.no-gutters) > .col,
    .row:not(.no-gutters) > [class*="col-"] {
      padding-right: $grid-Gutter-half-width;
      padding-left: $grid-Gutter-half-width;
    }
  }
}

Je recommanderais d'ajuster $ container-max-widths par la suite, car il y a une chance que cela change un peu la largeur d'origine.

UPD: J'ai fait un petit paquet npm avec la solution. Vous pouvez également y trouver un document assez détaillé: https://github.com/DZakh/Custom-gutters-bootstrap-plugin

1
Dmitry Zakharov

Carte configurable des tailles de gouttière à travers les points d'arrêt:

_ settings.scss

// Grid columns

// Custom map of Gutter widths across breakpoints.
$grid-Gutter-widths: (
  xs: 16px,
  md: 20px,
);
// Default Bootstrap Gutter width variable.
$grid-Gutter-width: map-get($grid-Gutter-widths, md);

styles.scss

@import './settings';
@import 'node_modules/bootstrap/scss/bootstrap';

.container {
  @each $breakpoint, $Gutter in $grid-Gutter-widths {
    @include media-breakpoint-up($breakpoint) {
      @include make-container($Gutter);
    }
  }
}

.row {
  @each $breakpoint, $Gutter in $grid-Gutter-widths {
    @include media-breakpoint-up($breakpoint) {
      @include make-row($Gutter);
    }
  }

  .row > .col,
  .row > [class*='col-'] {
    @each $breakpoint, $Gutter in $grid-Gutter-widths {
      @include media-breakpoint-up($breakpoint) {
        @include make-col-ready($Gutter);
      }
    }
  }
}
0
Matt Stone