Maison > interface Web > tutoriel CSS > Comment modifier le point d'arrêt XL de Bootstrap 4 ?

Comment modifier le point d'arrêt XL de Bootstrap 4 ?

Susan Sarandon
Libérer: 2024-11-02 08:34:29
original
356 Les gens l'ont consulté

How to Change Bootstrap 4's XL Breakpoint?

Personnalisation des points d'arrêt de Bootstrap 4

Dans Bootstrap 4, le point d'arrêt XL par défaut est défini à 1200px. Cependant, dans certaines applications, un point d'arrêt différent peut être nécessaire. Ce guide explique comment personnaliser les points d'arrêt de Bootstrap et fournit une solution pour modifier le point d'arrêt XL à 1280 px pour un projet.

Pour modifier le point d'arrêt XL globalement, vous devez modifier les points d'arrêt $grid-breakpoints et $container-max. -variables de largeurs dans les fichiers sources Sass de Bootstrap. Voici un exemple de la façon de procéder :

<code class="scss">$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 source files after modifying variables
@import "~bootstrap/scss/bootstrap";</code>
Copier après la connexion

En modifiant ces variables avant d'importer les sources de Bootstrap, vous pouvez remplacer les points d'arrêt par défaut et utiliser des valeurs personnalisées dans votre application. Cette méthode vous permet de personnaliser le système de grille de Bootstrap pour répondre aux besoins spécifiques de votre projet sans avoir à recompiler le framework à partir de ses 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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal