Bootstrap 4 更改断点

Question

我有一个应用程序，其设计要求从台式机到平板电脑，或从 xl 到 lg 分别设置 1280 个断点。但是，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 的断点没有任何改变，它仍然会在 1200 像素宽处进行断点。

Answer 1

根据他们的documentation，为了自定义 Bootstrap 你需要：

1. 从/scss/_variables.scss 复制/粘贴到_custom.scss 任何您想要修改的内容
2. 从粘贴的代码中删除任何 !default 并将值更改为您想要的值
3. 重新编译（参见Build tools） - 您需要成功运行npm run dist 才能从源代码重新编译。

您不应该修改 _variables.scss 中的任何内容，因为升级 Bootstrap 后您将丢失这些更改。通过上述步骤，您可以安全地升级 Bootstrap 并保留您的模组。

注意：即使您不关心升级，并且想直接在/scss/_variables.scss 中进行修改，您仍然需要重新编译以将更改应用到您的/dist/ 文件。

---

附录：为了解决 basZero 对这不是“推荐的解决方案”的担忧，我认为 Bootstrap 已经从头开始构建为模块化和可配置的。他们提供了充足的文档：

• build tools
• theming
• 以及其contents 的地图

如果不建议重新编译，我认为他们不会经历如此详细的文档记录的麻烦。

另一个有用的工具是bootstrap.build，它基本上是一个在线重新编译工具（而且它不是唯一的）。

通过编译，您可以更改列数、边距/填充实用程序间隔值、响应断点，最重要的是，您可以指定要包括哪些模块：可以将引导程序限制为仅其网格系统或按钮模块或者可以选择仅包含其模态。

Answer 2

更改$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

另见：How to extend/modify (customize) Bootstrap 4 with SASS

Answer 3

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