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.
更改
$grid-breakpoints变量就可以正常工作。请记住，您必须导入custom.scss中的/bootstrap或bootstrap/variables，然后在 @import bootstrap 之后。例如：
演示：https://codeply.com/go/MlIRhbJYGj
另请参阅：如何扩展/使用 SASS 修改（自定义）Bootstrap 4
引导程序 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...