时间戳

首页 > 解决方案 > Bootstrap 5网格，如何在不同的断点处自定义网格排水沟（不使用实用程序类）？

sass - Bootstrap 5网格，如何在不同的断点处自定义网格排水沟（不使用实用程序类）？

问题描述

如何自定义 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;

标签： sassbootstrap-5gutter

解决方案

这很棘手，因为排水沟用于构建所有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();
        
    }
}

Codeply 上的引导 SASS

注意：这会产生很多额外的 CSS！

推荐阅读