Bootstrap 4更改断点

Question

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

我需要为引导程序全局更改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和$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 2

更改$grid-breakpoints变量将正常工作.请记住,你必须导入/bootstrap或bootstrap/variables在custom.scss,然后引导@import 之后.

例如:

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

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

另请参阅:如何使用SASS扩展/修改(自定义)Bootstrap 4

Answer 3

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

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

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

注意:即使您不关心升级,并且希望直接修改/scss/_variables.scss,仍需要重新编译才能将更改应用于/dist/文件.