Bootstrap 4.5 如何更改容器网格间距宽度

Posted 2023-03-05

【中文标题】Bootstrap 4.5 如何更改容器网格间距宽度

【英文标题】：Bootstrap 4.5 How can I change container grid-gutter-width

【发布时间】：2020-11-26 16:44:40

【问题描述】：

在_variables.scss 下，我们可以为所有组件更改$grid-gutter-width: 30px !default;。

现在，我只需要为.container 类更改它：

喜欢：

.container 
    padding-left: 40px;
    padding-right: 40px;

在 BS 4.5 上哪里可以管理这个？

【问题讨论】：

我不完全理解这个问题。您是否只想更改 .container 类和 not .container-fluid 内的行/列的装订线（填充）？ ... 或者您是否只想在容器本身（而不是网格列）上更改它？

@Zim yes.. 仅适用于类容器

【参考方案1】：

仅限.container...

.container 
   @include make-container(40px);

对于.container 和其中的网格列...

.container 
   @include make-container(40px);
   @include make-grid-columns($grid-columns, 40px, $grid-breakpoints)

Codeply demo

【讨论】：

太棒了..！我刚刚添加了80px 以获得40px 左右两侧的填充..