默认情况下,引导程序4有12列。可以通过(https://getbootstrap.com/docs/4.0/getting-started/theming/)创建custom.scss文件并将其SASS编译为css文件(将替换默认的Bootstrap css文件)来更改列数。可以通过覆盖变量来完成:
$grid-gutter-width: 14px;
$grid-columns: 24;
这适用于整个页面。但是我页面的某些区域结构完全不同。是否可以仅为某个区域定义不同数量的Bootstrap列?
答案 0 :(得分:2)
在每行中创建24列的最简单方法是使用auto-layout grid explained in my answer here。
但是,如果您需要一个带有所有响应断点的完整 24列网格...
选项1
一个选择是创建一个自定义的SASS @mixin(非常类似于Bootstrap 4的make-grid-columns mixin)。请注意,在mixin中,我使用的是.col24-
而不是.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";
这允许标准的12单位网格(.col-*
)与24单位网格(col24-*
)共存,因此您可以根据需要使用其中任何一个。
演示:https://www.codeply.com/go/GFkzKlFyX2
选项2
另一种选择是扩展24列网格的自定义容器(即:container-24
)类。这将使您可以简单地将container-24
用于自定义网格,并且col- *行将保持常规(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);
}
演示:https://www.codeply.com/go/Adfnwh9p4x
IMO,auto-layout grid是更简单的选项,因为此自定义版本将为CSS增加很多额外的“重量”。
答案 1 :(得分:0)
您可以使用自动布局列创建24列网格,也可以通过将$ grid-columns变量更改为24来生成自定义CSS builder。
<div class="row">
<div class="col">
1
</div>
<div class="col">
2
</div>
<div class="col">
.....
</div>
<div class="col">
24
</div>