Bootstrap 4更改断点 [英] Bootstrap 4 Change Breakpoints

问题描述

我有一个应用程序，其中设计要求从台式机到平板电脑或从xl到lg分别有1280个断点.但是，Bootstrap本身的xl断点为1200.

I have an application where the design calls for a 1280 breakpoint from desktop to tablet, or, xl to lg respectively. However, Bootstrap itself has the xl breakpoint at 1200.

我需要全局更改xl断点以进行引导.我必须从源文件重新编译Bootstrap 4吗?

I need to change that xl breakpoint globally for bootstrap. Do I have to recompile Bootstrap 4 from the source files?

我尝试在我的Sass构建中设置它:

I tried setting this in with my Sass build:

$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宽进行中断.

However, nothing changed with the breakpoint for xl globally, it still would do the break instead at 1200px wide.

推荐答案

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

Changing the $grid-breakpoints variable will work fine. Remember that you must import /bootstrap or the bootstrap/variables in the custom.scss, and then @import bootstrap after.

例如:

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

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

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

这篇关于Bootstrap 4更改断点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！