Personnaliser les points d'arrêt du système de grille de Bootstrap 4

Question

J'ai une application dont la conception nécessite 1280 points d'arrêt du bureau à la tablette ou du xl au LG respectivement. Cependant, Bootstrap lui-même a un point d'arrêt xl à 1 200.

Je dois modifier les points d'arrêt xl globalement pour le démarrage. Dois-je recompiler Bootstrap 4 à partir des sources ?

J'ai essayé de définir ceci dans ma version Sass :

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1280px
);

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

Cependant, il n'y a aucun changement dans le point d'arrêt global xl, il sera toujours cassé à 1200px de large.

Answer 1

Changez $grid-breakpoints 变量就可以正常工作。请记住，您必须导入 custom.scss 中的 /bootstrap 或 bootstrap/variables puis après @import bootstrap.

Par exemple :

$grid-breakpoints: (
  xs: 0,
  sm: 600px,
  md: 800px,
  lg: 1000px,
  xl: 1280px
);

Démo : https://codeply.com/go/MlIRhbJYGj

Voir aussi : Comment étendre/modifier (personnaliser) Bootstrap 4 avec SASS

Answer 2

Bootstrap 4.x et 5.x

Vous devez remplacer la variable $grid-breakpoints 和 $container-max-widths avant d'importer la source Bootstrap. Voici un exemple fonctionnel (scss) :

// File: theme.scss
// Override default BT variables:
$grid-breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xxl: 1900px
);
    
$container-max-widths: (
        sm: 540px,
        md: 720px,
        lg: 960px,
        xl: 1140px,
        xxl: 1610px
);
    
// Import BT sources
@import "../node_modules/bootstrap/scss/bootstrap";

// Your CSS (SASS) rules here...