在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;
为什么变量覆盖有差异?
答案 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