为 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";

另见：How to get bootstrap 4 24 grid

---

Bootstrap 4 Customizer

Answer 2

在“application.scss”中，您可以添加自己的样式表，其中包含自定义变量以覆盖 Bootstrap 的：

---

// application.scss

@import "variables"; // Add custom vars here

@import "bootstrap/variables";

@import "bootstrap/main"; 


// _variables.scss

%scope {
  @import "boostrap/variables";

  @gridColumns: 24
  @gridColumnWidth: 30px
  @gridGutterWidth: 1px
  @gridColumnWidth1200: 35px
  @gridGutterWidth1200: 15px
  @gridColumnWidth768: 21px
  @gridGutterWidth768: 10px
}

查看此答案以获取更多信息： https://stackoverflow.com/a/38225564/1528308

Answer 3

24 Grid system with Gutter
@gridColumns: 24
@gridColumnWidth: 30px
@gridGutterWidth: 1px
@gridColumnWidth1200: 35px
@gridGutterWidth1200: 15px
@gridColumnWidth768: 21px
@gridGutterWidth768: 10px

24 Grid system without Gutter
@gridColumns: 24
@gridColumnWidth: 40px
@gridGutterWidth: 0px
@gridColumnWidth1200: 50px
@gridGutterWidth1200: 0px
@gridColumnWidth768: 31px
@gridGutterWidth768: 0px