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

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

Susan Sarandon
Susan Sarandonoriginal
2024-11-02 08:34:29344parcourir

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>

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!

Déclaration:
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