为Bootstrap 4创建自定义网格编号（24） [英] Creating custom grid number (24) for Bootstrap 4

问题描述

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

这是bootstrap文档

  $ grid-columns：12 ！默认; 
 $ 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文件
 HTML文件
 Js文件
 .... 
  




解决方案

$ grid-columns 是一个SASS变量。您可以使用SASS将网格更改为像这样的24列...



  $ grid-columns：24; 
 $ grid-gutter-width-base：15px; 
 
 @importbootstrap; 
  

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

变量名称有变化 Bootstrap 4.0.0 ：

  $ grid-columns：24; 
 $ grid-gutter-width：12px; 
 
 @importbootstrap; 
  

另请参阅：

---

Bootstrap 4 Customizer

I have a project and I want to integrate some bootstrap into my html files for ui development. I know that the standard grid size is 12 and I wanted to change the number of grid spaces from 12 to 24. I know there is a way to do it from the documentation but I dont know how to where to integrate it.

This is the bootstrap documentation

$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;

Where do I put it in my code.

CSS file
HTML file
Js file
....

解决方案

$grid-columns is a SASS variable. You can use SASS to change the grid to 24 columns like this...

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

@import "bootstrap";

Demo https://www.codeply.com/go/C0Uh7PokEl

The variable names have change slightly as of Bootstrap 4.0.0:

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

@import "bootstrap";

Also see: How to get bootstrap 4 24 grid

---

Bootstrap 4 Customizer

这篇关于为Bootstrap 4创建自定义网格编号（24）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！