Question

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

我需要为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全局的断点没有任何改变，它仍然会在1200px宽的时候进行中断。

Answer 1

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

例如：

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

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

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

Answer 2

您需要覆盖$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...

Answer 3

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

从/scss/_variables.scss复制/粘贴到_custom.scss无论您想要修改
从粘贴的代码中删除任何!default并将值更改为您想要的值
重新编译（请参阅Build tools） - 您需要成功运行npm run dist以从源代码重建。

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

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

Bootstrap 4更改断点

3 个答案: