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

Posted 2023-03-07

【中文标题】Bootstrap 5网格，如何在不同的断点处自定义网格排水沟（不使用实用程序类）？

【英文标题】：Bootstrap 5 grid, how to customize the grid gutters at different breakpoints (not using utility classes)?

【发布时间】：2021-09-29 02:27:20

【问题描述】：

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

【问题讨论】：

根据官方文档，排水沟类确实有响应断点，所以你应该能够使用，比如说g-0 g-lg-2，直到中等，然后 g-2 (0.75rem) 从大。

我认为这些装订线类是“网格间距实用程序类”的一部分，他们希望全局更改每个断点的装订线宽度。

【参考方案1】：

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