默认情况下,Bootstrap 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 列?
最佳答案
在每行创建 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://codeply.com/go/GFkzKlFyX2
选项 2
另一个选项是为 24 列网格扩展自定义容器(即:container-24
)类。这将允许您简单地使用 container-24
作为自定义网格,并且行 col-* 将保持常规 (col-{breakpoint}-1
.. col-{断点}-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://codeply.com/go/Adfnwh9p4x
IMO,auto-layout grid 是更简单的选项,因为此自定义构建将为 CSS 添加大量额外的“重量”。
关于css - 仅为页面的某些部分(div)定义不同数量的 Bootstrap 4 列?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51555921/