作者:ahhylwjj | 来源:互联网 | 2023-01-05 15:38
我有一个应用程序,其中设计需要从桌面到平板电脑的1280断点,或者xl到lg.但是,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宽度处进行中断.
1> kxo..:
您需要覆盖$grid-breakpoints
和$container-max-widths
变量.这是一个工作示例(scss):
// File: theme.scss
// Override default BT variables:
$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 BT sources
@import "../node_modules/bootstrap/scss/bootstrap";
// Your CSS (SASS) rules here...
@TitoLeiva不,我只是为用例定义了一个自定义的新宽度。您可以定义任何内容。
2> Zim..:
更改$grid-breakpoints
变量将正常工作.请记住,你必须导入/bootstrap
或bootstrap/variables
在custom.scss
,然后引导@import 之后.
例如:
$grid-breakpoints: (
xs: 0,
sm: 600px,
md: 800px,
lg: 1000px,
xl: 1280px
);
演示:https://www.codeply.com/go/MlIRhbJYGj
另请参阅:如何使用SASS扩展/修改(自定义)Bootstrap 4
3> Andrei Gheor..:
根据他们的文档,为了自定义Bootstrap,您需要:
复制/粘贴/scss/_variables.scss
到_custom.scss
您想要修改的任何内容
!default
从粘贴的代码中删除任何内容并将值更改为您想要的值
重新编译(请参阅构建工具) - 您需要成功运行npm run dist
以从源重建.
你不应该修改任何内部_variables.scss
因为你在升级Bootstrap时会丢失这些更改.通过上述步骤,您可以安全地升级Bootstrap并保留您的mod.
注意:即使您不关心升级,并且希望直接修改/scss/_variables.scss
,仍需要重新编译才能将更改应用于/dist/
文件.