仅为页面的某个部分(div)定义不同数量的Bootstrap 4列?

IMO，自动布局网格是更简单的选项，因为此自定义版本会增加很多额外的重量" "添加到CSS.相关:如何扩展/修改(自定义)带有SASS的Bootstrap 4 By default Bootstrap 4 has 12 columns. It is possible to change the number of columns by (https://getbootstrap.com/docs/4.0/getting-started/theming/) creating custom.scss file and SASS-compiling it into css file that will replace the default Bootstrap css file. It can be done by overriding variables: $grid-gutter-width: 14px;$grid-columns: 24;This works for the entire page. But I have some region of the page with completely different structure. Is it possible to define distinct number of Bootstrap columns for some region only? 解决方案 The easiest way to create 24 columns across each row is to use the auto-layout grid explained in my answer here.However, if you need a complete 24-column grid with all of the responsive breakpoints...Option 1One option is to create a custom SASS @mixin (very similar to the Bootstrap 4 make-grid-columns mixin). Notice in the mixin that I used .col24- instead of .col-...@import "bootstrap/functions";@import "bootstrap/variables";@import "bootstrap/mixins";@mixin make-custom-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { %grid-column { position: relative; width: 100%; min-height: 1px; // Prevent columns from collapsing when empty padding-right: ($gutter / 2); padding-left: ($gutter / 2); } @each $breakpoint in map-keys($breakpoints) { $infix: breakpoint-infix($breakpoint, $breakpoints); @for $i from 1 through $columns { .col24#{$infix}-#{$i} { @extend %grid-column; } } @include media-breakpoint-up($breakpoint, $breakpoints) { .col24#{$infix} { flex-basis: 0; flex-grow: 1; max-width: 100%; } .col24#{$infix}-auto { flex: 0 0 auto; width: auto; max-width: none; } @for $i from 1 through $columns { .col24#{$infix}-#{$i} { @include make-col($i, $columns); } } @for $i from 0 through $columns { .order#{$infix}-#{$i} { order: $i; } } } }}@include make-custom-grid-columns(24, 10px, $grid-breakpoints);/* remember to import Bootstrap after the changes */ @import "bootstrap";This allows the standard 12 unit grid (.col-*) to co-exist with the 24 unit grid (col24-*) so you can use either as needed.Demo: https://www.codeply.com/go/GFkzKlFyX2Option 2Another option is to extend a custom container (ie:container-24) class for the the 24 column grid. This would allow you to simply use container-24 for the custom grid, and the row, col-* would remain the conventional (col-{breakpoint}-1 .. col-{breakpoint}-24)....container-24 { @include make-container(); @include make-container-max-widths($container-24-max-widths, $grid-breakpoints); /* custom cols- 24 column grid with 6px gutter */ @include make-grid-columns(24, 6px, $grid-breakpoints);}Demo: https://www.codeply.com/go/Adfnwh9p4xIMO, the auto-layout grid is the simpler option as this custom build will add a lot of extra "weight" to the CSS.Related: How to extend/modify (customize) Bootstrap 4 with SASS 这篇关于仅为页面的某个部分(div)定义不同数量的Bootstrap 4列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！