同伴们，
我试图在大型容器上获得12列和24个装订线的大小，而在一个容器视图中处于中等和较低状态时要获得6列和18装订线的大小，而在另一个容器视图中，在调整大小时，在大尺寸上将有15列和12个装订线的大小因此，在较低的意见？
这是我可以在前者上实现的（12列24条装订线，6列18条装订线）：
background-grid {
@include make-row();
@include make-col-ready;
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
//@include make-col(map-get($dani-number-col, $breakpoint ));
.row.no-gutters {
margin-right: map-get($dani-row-no-gutters, $breakpoint );
margin-left: map-get($dani-row-no-gutters, $breakpoint );
}
.row > .col,
.row > [class*="col-"] {
margin-right: map-get($dani-gutters, $breakpoint );
margin-left: map-get($dani-gutters , $breakpoint );
}
}
}
}
虽然我尝试做另一个容器类来代表另一个视图（15列，6个装订线），但我无法理解。主要是因为我对CSS和SASS的理解可能很少，因此尝试使用Google搜索，但似乎没有适当的教程吗？
.foreground-container {
width: 1428px;
@include make-foreground-container();
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
//@include make-col(map-get($dani-number-col, $breakpoint ));
// @include make-col(15);
.foreground-row {
margin-right: map-get($dani-row-no-gutters, $breakpoint );
margin-left: map-get($dani-row-no-gutters, $breakpoint );
}
.foreground-row > .foreground-col,
.foreground-row > [class*="foreground-col"] {
margin-right: map-get($dani-row-no-gutters, $breakpoint );
margin-left: map-get($dani-row-no-gutters, $breakpoint );
}
}
}
}
.foreground-row {
@include make-foreground-row();
// @include make-col(12);
}
.foreground-col {
@include make-col-ready();
@include make-col(15);
}
对于HTML，css
<div class="background-container">
<div class="container">
<div class="row">
<div class="col">col1</div>
<div class="col">col2</div>
<div class="col">col3</div>
</div>
</div>
</div>
<div class="foreground-container">
<div class="container">
<div class="row">
<div class="col">col1</div>
<div class="col">col2</div>
<div class="col">col3</div>
</div>
</div>
</div>
这有可能吗？如果是这样，如何以及是否不是实现我想要实现的目标的一种好方法？
谢谢。
最佳答案
您可以进行自定义混合，以重新生成自定义容器内的相应断点列...
@mixin make-grid-columns-custom($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
@each $breakpoint in map-keys($breakpoints) {
$infix: breakpoint-infix($breakpoint, $breakpoints);
// only override lg and up
@include media-breakpoint-up('lg', $breakpoints) {
@for $i from 1 through $columns {
.col#{$infix}-#{$i} {
padding-right: ($gutter / 2);
padding-left: ($gutter / 2);
@include make-col($i, $columns);
}
}
}
}
}
@import "bootstrap";
$foreground-container-max-widths: (
sm: 600px,
md: 800px,
lg: 1000px,
xl: 1428px
);
/* make the container for the custom grid */
.foreground-container > .container {
@include make-container();
@include make-container-max-widths($foreground-container-max-widths, $grid-breakpoints);
}
.foreground-container {
/* custom col for all breakpoints */
@include make-grid-columns(6, 3px, $grid-breakpoints);
/* override lg and up using custom mixin */
@include make-grid-columns-custom(15, 6px, $grid-breakpoints);
}
演示：https://www.codeply.com/go/SLmHas8zEZ
相关：Define different number of Bootstrap 4 columns for some part (div) of page only?
关于css - 如何使用SASS为不同的网格列和断点自定义Bootstrap 4？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52518766/