【问题标题】:Why can't I override the container padding variable in BootstrapVue?为什么我不能覆盖 BootstrapVue 中的容器填充变量?
【发布时间】:2019-07-20 02:05:25
【问题描述】:

我正在为 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;

为什么与变量覆盖存在差异?

【问题讨论】:

    标签: bootstrap-4 themes bootstrap-vue


    【解决方案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

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

    containers 也得到一个 x-padding $grid-gutter-width / 2

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

    【讨论】:

    猜你喜欢
    • 2015-09-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多