Comment personnaliser les points d'arrêt Bootstrap 4 sans recompiler ?

Comment personnaliser les points d'arrêt Bootstrap 4

Vous souhaitez modifier le point d'arrêt xl de 1200 à 1280 globalement dans Bootstrap 4. Cependant, l'attribution de nouvelles valeurs à la variable $grid-breakpoints de Bootstrap ne semble pas modifier le point d'arrêt xl. Avez-vous besoin de recompiler Bootstrap à partir de zéro pour accomplir cela ?

La solution : remplacer les variables avant l'importation

La clé pour personnaliser les points d'arrêt de Bootstrap 4 est de remplacer les Variables $grid-breakpoints et $container-max-widths avant d'importer les sources Bootstrap. Voici comment procéder dans Sass :

<code class="scss">// theme.scss
// Override default Bootstrap variables:
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1280px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1220px
);

// Import Bootstrap sources
@import "~bootstrap/scss/bootstrap";

// Custom CSS rules here...</code>

Maintenant, le point d'arrêt xl sera globalement défini sur 1 280 px, et tous les styles Bootstrap dépendant des points d'arrêt, tels que la largeur des conteneurs, s'ajusteront en conséquence.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!