自定义 Bootstrap 4 的网格系统断点

Question

我有一个应用程序，其中设计需要从台式机到平板电脑的 1280 个断点，或者分别从 xl 到 lg。但是，Bootstrap 本身在 1200 处有 xl 断点。

我需要为引导程序全局更改该 xl 断点。我是否必须从源文件重新编译 Bootstrap 4？

我尝试在我的 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
);

但是，全局 xl 的断点没有任何变化，它仍然会在 1200px 宽处进行断点。

原文由 smb 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

引导 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...

原文由 David DIVERRES 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

例如：

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

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

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

原文由 Zim 发布，翻译遵循 CC BY-SA 4.0 许可协议