Passen Sie die Haltepunkte des Rastersystems von Bootstrap 4 an

Question

Ich habe eine Anwendung, bei der das Design 1280 Haltepunkte vom Desktop zum Tablet bzw. von XL zum LG erfordert. Allerdings hat Bootstrap selbst einen XL-Haltepunkt bei 1200.

Ich muss die XL-Haltepunkte für den Start global ändern. Muss ich Bootstrap 4 aus dem Quellcode neu kompilieren?

Ich habe versucht, dies in meinem Sass-Build festzulegen:

$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
);

Es gibt jedoch keine Änderung am globalen XL-Breakpoint, er wird weiterhin bei einer Breite von 1200 Pixeln unterbrochen.

Answer 1

更改 $grid-breakpoints 变量就可以正常工作。请记住，您必须导入 custom.scss 中的 /bootstrap 或 bootstrap/variables，然后在 @import bootstrap 之后。

例如：

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

演示：https://codeply.com/go/MlIRhbJYGj

另请参阅：如何扩展/使用 SASS 修改（自定义）Bootstrap 4

Answer 2

引导程序 4.x 和 5.x

在导入 Bootstrap 源之前，您需要覆盖 $grid-breakpoints 和 $container-max-widths 变量。这是一个工作示例（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...