sass - Bootstrap 5 网格，如何在不同断点处自定义网格间距(不使用实用程序类)？

Question

如何自定义 Bootstrap 5 以在不同断点处具有不同的网格间距？我不想使用网格间距实用程序类，因为它们会在标记中到处都是硬编码，并且很难更改。
看起来 Bootstrap 5 有这个变量作为默认的装订线宽度:

$grid-gutter-width: 1.5rem;

我想要的是这样的(这些值只是为了说明这个想法):

$grid-gutter-width-sm: 1rem;
$grid-gutter-width-md: 1.5rem;
$grid-gutter-width-lg: 2rem;
$grid-gutter-width-xl: 2.5rem;

Answer 1

这很棘手，因为排水沟用于构建所有 container* , row和 col* .您可以使用每个断点的装订线宽度制作自定义 map ，然后迭代 map 以在每个断点处重新构建网格:

@import "functions";
@import "variables";
@import "mixins";

$custom-gutter-widths: (
  sm: 1rem,
  md: 1.5rem,
  lg: 2rem,
  xl: 2.5rem,
  xxl: 3rem,
);

@import "bootstrap";

@each $breakpoint, $gutterwidth in $custom-gutter-widths {
    $container-padding-x: $gutterwidth*.5;
    $grid-gutter-width: $gutterwidth;
    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
        .container,
        .container-fluid {
            @include make-container();
        }
        
        .row {
            @include make-row();
            
            > * {
              @include make-col-ready();
            }
        }
        @include make-grid-columns();
        
    }
}

Bootstrap SASS on Codeply
注意:这会产生很多额外的 CSS!