在 Bootstrap 4 中，如何根据断点更改内部 $grid-gutter-width？

Posted 2023-03-06

【中文标题】在 Bootstrap 4 中，如何根据断点更改内部 $grid-gutter-width？

【英文标题】：In Bootstrap 4, how to change inner $grid-gutter-width depending to breakpoints?

【发布时间】：2018-08-24 11:12:32

【问题描述】：

我目前正在 SCSS 中开发 Bootstrap4。

我只想在智能手机上更改内部 $grid-gutter-width。

根据_grid.scss

$grid-columns: 12 !default; $grid-gutter-width: 30px !default;

在引导站点上，它是这样说的：

更新了网格大小、mixin 和变量。网格排水沟现在有一个 Sass 映射，因此您可以在每个断点指定特定的排水沟宽度。

我找不到地图以及如何完成。

【参考方案1】：

我刚刚制作了一个包，允许自定义每个断点的排水沟和容器边距：https://github.com/BenceSzalai/bootstrap-responsive-grid

对于那些对纯 SCSS 解决方案感兴趣的人来说，这可能是一种有效的方式，因为它首先改变了 Bootstrap CSS 的生成方式，而不是在已经生成的 CSS 之后添加覆盖。它非常适合在构建链中使用，例如使用 Webpack 从 npm 包编译 css。

【参考方案2】：

与 Arajay 的回答相同，但具有一些自动化功能，可以为每个断点选择特定的装订线宽度：

/* Specify your own gutters for every breakpoint. I use media-breakpoint-up so to avoid a default width it's better to always include "xs", and then you can do whatever you want */
$grid-gutter-widths: (
  xs: 10px,
  /* "sm" takes the same width as "xs" automatically */
  md: 20px,
  lg: 30px
);

/* You don't need to change anything below */
@each $grid-breakpoint, $grid-gutter-width in $grid-gutter-widths 
  @include media-breakpoint-up($grid-breakpoint) 
    $grid-gutter-half-width: $grid-gutter-width / 2;
    .row:not(.no-gutters) 
      margin-right: -$grid-gutter-half-width;
      margin-left: -$grid-gutter-half-width;
    
    .row:not(.no-gutters) > .col,
    .row:not(.no-gutters) > [class*="col-"] 
      padding-right: $grid-gutter-half-width;
      padding-left: $grid-gutter-half-width;
    
  

我建议之后调整 $container-max-widths，因为它有可能会改变原始宽度。

UPD：我用解决方案做了一个小的 npm 包。你也可以在那里找到一个非常详细的文档：https://github.com/DZakh/Custom-gutters-bootstrap-plugin

【参考方案3】：

与 Zim 的答案相同，但使用行修复并使用 $grid-gutter-width 变量。如果你使用预处理器，效果会好 10%。

更新：我添加了更多样式以保留之前被破坏的 .no-gutters 的功能。

// HALF GUTTER WIDTH ON XS
@media (max-width: map-get($grid-breakpoints, sm))
    .row:not(.no-gutters) 
        margin-right: -$grid-gutter-width / 4;
        margin-left: -$grid-gutter-width / 4;
    
    .row:not(.no-gutters) > .col,
    .row:not(.no-gutters) > [class*="col-"] 
        padding-right: $grid-gutter-width / 4;
        padding-left: $grid-gutter-width / 4;
    

【参考方案4】：

Bootstrap documentation 打算完成此操作的方式是在 $grid-gutter-width 变量上设置最小装订线宽度大小，然后一直使用边距/填充辅助类来处理更大的断点（移动优先）。

<div class="row mx-md-n5">
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
</div>

在示例中，他们在行上设置负 x 边距，然后在每列上设置相同数量的 x 填充。如果您为每个断点设置不同的宽度，这将变得相当冗长且难以阅读。我建议使用上面的替代答案。

【参考方案5】：

可配置的跨断点间距大小图：

_settings.scss

// Grid columns

// Custom map of gutter widths across breakpoints.
$grid-gutter-widths: (
  xs: 16px,
  md: 20px,
);
// Default Bootstrap gutter width variable.
$grid-gutter-width: map-get($grid-gutter-widths, md);

styles.scss

@import './settings';
@import 'node_modules/bootstrap/scss/bootstrap';

.container 
  @each $breakpoint, $gutter in $grid-gutter-widths 
    @include media-breakpoint-up($breakpoint) 
      @include make-container($gutter);
    
  


.row 
  @each $breakpoint, $gutter in $grid-gutter-widths 
    @include media-breakpoint-up($breakpoint) 
      @include make-row($gutter);
    
  

  .row > .col,
  .row > [class*='col-'] 
    @each $breakpoint, $gutter in $grid-gutter-widths 
      @include media-breakpoint-up($breakpoint) 
        @include make-col-ready($gutter);
      
    
  

【讨论】：

很好的答案，但最后一个右大括号应该移到 ".row > .col," 之前

【参考方案6】：

这看起来像是文档中的一个错误。以前有地图，但是it was removed在4.0.0发布之前。但是，使用 SASS 只为 xs 添加它是相当容易的。例如移动设备上的 5px...

@media (min-width: map-get($grid-breakpoints, xs)) and (max-width: map-get($grid-breakpoints, sm))
    .row > .col,
    .row > [class*="col-"] 
      padding-right: 5px;
      padding-left: 5px;
    

https://www.codeply.com/go/XgynFzTmGv

【讨论】：

实现它的好方法。谢谢！

在此过程中，最好为行元素添加一些覆盖以保持正确的网格：.rowmargin-right: -5px;左边距：-5px;