Comment remplacer les points d'arrêt du système de grille Bootstrap 4.x et 5.x ?

Remplacement des points d'arrêt du système de grille Bootstrap 4.x et 5.x

Pour personnaliser le point d'arrêt xl de Bootstrap, il est crucial de comprendre les variables qui régissent points d'arrêt et largeurs de conteneurs.

sass
Dans votre build Sass, vous devrez modifier deux variables : $grid-breakpoints et $container-max-widths. Ces variables définissent les seuils de taille auxquels le système de grille Bootstrap et les éléments du conteneur se restructureront.

Dans le code Sass fourni, vous avez correctement ajusté les $grid-breakpoints pour inclure un point d'arrêt de 1 280 px. Cependant, pour que les modifications prennent effet, vous devez également modifier la variable $container-max-widths.

Exemple de travail
Pour remplacer le point d'arrêt xl et le définir sur 1280px, voici un exemple fonctionnel dans Sass :

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

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1220px, // Custom max-width for xl breakpoint
  xxl: 1610px
);

// Import BT sources
@import "../node_modules/bootstrap/scss/bootstrap";

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

Dans cet exemple, vous avez réussi à étendre les points d'arrêt de Bootstrap pour inclure votre point d'arrêt personnalisé de 1 280 px tout en ajustant également la largeur maximale du conteneur 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!