Creating custom grid number (24) for Bootstrap 4 [

问题:

This question already has an answer here:

• How to get bootstrap 4 24 grid 2 answers

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
....

回答1:

$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

回答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

回答3:

Inside 'application.scss' you can add in your own stylesheet containing custom vars to override Bootstrap's:

---

// 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
}

Check this answer for more info: https://stackoverflow.com/a/38225564/1528308