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

this.config.names[this.type].push(this.newName)是一个SASS变量。您可以使用SASS将网格更改为24列，如下所示......

$grid-columns

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

从 Bootstrap 4.0.0 ：

开始，变量名称略有变化

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

@import "bootstrap";

另见：How to get bootstrap 4 24 grid

Bootstrap 4 Customizer

Answer 2

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

Answer 3

在'application.scss'里面你可以添加你自己的包含自定义变量的样式表来覆盖Bootstrap：

LinkedHashMap

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

为Bootstrap 4创建自定义网格编号（24）

3 个答案: