如何使用Bootstrap 4更改断点？
如何使用Bootstrap 4更改断点？
提问于 2018-06-05 00:46:20
我有一个应用程序，其中设计需要从桌面到平板电脑分别调用1280个断点，或者分别从xl到lg。但是，Bootstrap本身具有1200的xl断点。
我需要全局更改该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宽的范围内执行中断。
回答 2
Stack Overflow用户
发布于 2018-06-05 09:14:21
更改$grid-breakpoints变量将正常工作。请记住，你必须导入/bootstrap或bootstrap/variables在custom.scss，然后引导@import 之后。
例如：
$grid-breakpoints: (
xs: 0,
sm: 600px,
md: 800px,
lg: 1000px,
xl: 1280px
);
Stack Overflow用户
发布于 2018-06-05 09:48:29
有一个工作示例（scss）：
// theme.scss
$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 "../node_modules/bootstrap/scss/bootstrap";
// ...
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100004743
复制相关文章
相似问题
腾讯云开发者
