我有一个应用程序,设计要求从台式机到平板电脑,或者分别从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
/bootstrap
bootstrap/variables
custom.scss
例如:
$grid-breakpoints: ( xs: 0, sm: 600px, md: 800px, lg: 1000px, xl: 1280px );