为 Bootstrap 4 创建自定义网格编号 (24)

Question

我有一个项目，我想将一些引导程序集成到我的 html 文件中以进行 ui 开发。我知道标准网格大小是 12，我想将网格空间的数量从 12 更改为 24。我知道有一种方法可以从文档中做到这一点，但我不知道如何将它集成到哪里。

这是引导程序文档

$grid-columns:               12 !default;
$grid-gutter-width-base:     30px !default;
$grid-gutter-widths: (
  xs: $grid-gutter-width-base,
  sm: $grid-gutter-width-base,
  md: $grid-gutter-width-base,
  lg: $grid-gutter-width-base,
  xl: $grid-gutter-width-base
) !default;

我在哪里把它放在我的代码中。

CSS file
HTML file
Js file
....

Answer 1

$grid-columns是一个 SASS 变量。您可以使用 SASS 将网格更改为 24 列，如下所示...

$grid-columns:           24;
$grid-gutter-width-base: 15px;

@import "bootstrap";

演示 https://codeply.com/go/C0Uh7PokEl

自 Bootstrap 4.0.0 起，变量名称略有变化：

$grid-columns:      24;
$grid-gutter-width: 12px;

@import "bootstrap";

另请参阅：如何获得 bootstrap 4 24 网格

Bootstrap 4 定制器