一尘不染

Bootstrap 4更改断点

css

我有一个应用程序,设计要求从台式机到平板电脑,或者分别从xl到lg,都需要1280个断点。但是,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宽处进行断点。


阅读 520

收藏
2020-05-16

共1个答案

一尘不染

更改$grid- breakpoints变量可以正常工作。请记住,你必须导入/bootstrapbootstrap/variablescustom.scss,然后@import引导
后。

例如:

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