Bootstrap 4更改断点

  • Z时代
  • 2024-01-10
  • 分类：问答

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

回答：

更改$grid-

breakpoints变量可以正常工作。请记住，你必须导入/bootstrap或bootstrap/variables在custom.scss，然后@import引导

后。

例如：

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

以上是 Bootstrap 4更改断点 的全部内容， 来源链接： utcz.com/qa/417184.html

回到顶部