Comment personnaliser les points d'arrêt du système de grille Bootstrap 4 ?

Personnalisation des points d'arrêt du système de grille Bootstrap 4

Dans cet article, nous explorerons comment modifier les points d'arrêt du système de grille par défaut de Bootstrap 4. Cela peut être utile si votre application nécessite des valeurs de point d'arrêt spécifiques qui diffèrent des paramètres par défaut de Bootstrap, comme la modification du point d'arrêt xl de 1 200 px à 1 280 px.

Solution pour Bootstrap 4.x et 5.x

Pour remplacer globalement les points d'arrêt du système de grille dans Bootstrap 4.x ou 5.x, vous devez modifier les variables $grid-breakpoints et $container-max-widths avant d'importer les fichiers sources Bootstrap. Voici un exemple de code scss qui montre comment y parvenir :

<code class="scss">// File: theme.scss

// Override default BT 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 BT sources
@import "~bootstrap/scss/bootstrap";

// Your CSS (SASS) rules here...</code>

En apportant ces modifications, vous pouvez personnaliser les points d'arrêt pour répondre aux exigences spécifiques de votre application sans avoir à recompiler Bootstrap à partir des fichiers sources.

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!