为什么不能在BootstrapVue中覆盖容器填充变量?

时间:2019-07-18 16:11:41

标签: bootstrap-4 themes bootstrap-vue

VueBootstrap theming guide之后,我正在为BootstrapVue 2.0(使用Bootstrap 4.3)构建主题。我有一个theme.scss文件,该文件的开头有替换项,结尾有基本样式的导入。我正在尝试覆盖默认的容器水平填充,但似乎不起作用。

theme.scss

$container-padding-x: 30px !default;

@import 'bootstrap/scss/bootstrap.scss';
@import 'bootstrap-vue/src/index.scss';

容器左侧和右侧的填充保留为默认的15px

此外,如果我尝试覆盖装订线宽度,则它可以工作,并且更改甚至可以调整容器填充,因为它的填充量是装订线宽度的一半。

$grid-gutter-width: 60px !default;

为什么变量覆盖有差异?

1 个答案:

答案 0 :(得分:1)

$container-padding-x在Bootstrap v4.3.x中不是变量(但在尚未发布的v5.x中)

https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

网格填充的控制由$grid-gutter-width控制,该$grid-gutter-width / 2应用于行($grid-gutter-width / 2的负边距)和列的填充(containers

https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid-framework.scss

$grid-gutter-width / 2也得到{{1}}的x填充

https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss