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

Question

我的应用程序需要在从台式机到平板电脑的设计中使用1280断点，或者分别在xl和lg上。然而，Bootstrap本身的xl断点为1200。

我需要全局更改Bootstrap的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像素宽度处进行断开。

- smb

---

请注意：这里大多数答案使用的断点 allegedly 不兼容 Bootstrap。还有一些 mathematical requirements。 - rinogo

Answer 1

Bootstrap 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

---

我阅读了Bootstrap文档，但是没有XXL尺寸。这只能由第三方提供。你是否在使用这个？https://www.npmjs.com/package/bootstrap-xxl - Tito Leiva

不，我只是为我的使用情况定义了一个自定义的新宽度。你可以定义任何你想要的东西。 - David DIVERRES

Answer 2

更改$grid-breakpoints变量是可行的。请记住，在custom.scss中，您必须导入/bootstrap或bootstrap/variables，然后在之后导入bootstrap 。

例如：

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

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

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

- Zim

---

我很确定我们还需要更新$container-max-widths，对吗？ - rinogo

Answer 3

根据他们的文档，为了自定义Bootstrap，您需要：

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

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

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

---

补充说明：为了解决basZero对这不是“推荐解决方案”的担忧，我认为Bootstrap从头开始就被构建为模块化和可配置的。他们提供了丰富的文档：

• 构建工具
• 主题
• 以及其内容的地图

如果不推荐重新编译，我认为他们不会费心详细记录它。

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

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

- tao

---

那不是一个推荐的解决方案，你不应该修改 bootstrap 定义文件。相反，在导入 bootstrap SCSS 之前，应该用自己的 SCSS 覆盖它们。 - basZero

@basZero，我已经添加了我的答案来解决你的问题。 - tao

对不起，我可能误解了你的解决方案。现在它很清晰和正确！ - basZero