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

问题描述

如何自定义 Bootstrap 5 以在不同断点处具有不同的网格间距？我不想使用网格间距实用程序类，因为它们会在标记中到处都是硬编码，并且很难更改。

看起来 Bootstrap 5 有这个变量作为默认的装订线宽度：

let board = [
    [0,0],[0,0]
];

我想要的是这样的（这些值只是为了说明这个想法）：

$grid-gutter-width: 1.5rem;

解决方法

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

@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！