如何在引导5中添加额外的断点?

Question

我在一个项目中将Bootstrap 4升级到5。BS4项目有一个额外的断点。在BS5中，它不再像预期的那样工作。在Bootstrap 5中添加额外的自定义断点的正确方法是什么?

现有代码为:$grid breakpoints:xs: 0,sm: 576 px,md: 768 px,lg: 992 px,xl: 1200 px,总:1540 px,xxxl: 2160像素

);

Answer 1

这可以通过Sass定制和重新编译来实现。

@import "../node_modules/bootstrap/scss/functions";
$grid-breakpoints: (
xs: 0,
xsm: 362px,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/bootstrap";

查看更多信息:

https://getbootstrap.com/docs/5.1/customize/sass/

https://www.youtube.com/watch?v=nCX3QVl_PiI