Bootstrap 3项目引入Bootstrap 4间距类后小屏幕边距过大的解决方案

首先，咱们得先搞清楚问题的根源：你引入的这段Bootstrap 4间距类代码，默认复用了Bootstrap 4的$spacers变量——这个变量的取值基于rem，而且Bootstrap 4的media-breakpoint-up(xs)逻辑是无媒体查询限制的（也就是所有屏幕都生效），所以小屏设备会直接使用和大屏一样的间距值，自然就显得过大了。

下面给你两种可行的修复方案，你可以根据自己的需求选择：

方案一：为小屏单独定义缩小版的间距变量 #

这种方式最灵活，能精准控制不同断点的间距大小：

1. 先在_spacing.scss开头新增小屏专用的$spacers-xs变量，把值按比例缩小（比如原$spacers的50%）：

// 定义小屏专用间距（示例为原spacers的一半）
$spacers-xs: (
  0: 0,
  1: 0.25rem,
  2: 0.5rem,
  3: 1rem,
  4: 1.5rem,
  5: 2rem
);

2. 修改原循环逻辑，判断当前断点是否为xs，如果是就用$spacers-xs，否则用原$spacers：

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    // 针对xs断点切换间距变量
    $current-spacers: if($breakpoint == xs, $spacers-xs, $spacers);
    
    @each $prop, $abbrev in (margin: m, padding: p) {
      @each $size, $length in $current-spacers {
        .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
        .#{$abbrev}t#{$infix}-#{$size}, .#{$abbrev}y#{$infix}-#{$size} { #{$prop}-top: $length !important; }
        .#{$abbrev}r#{$infix}-#{$size}, .#{$abbrev}x#{$infix}-#{$size} { #{$prop}-right: $length !important; }
        .#{$abbrev}b#{$infix}-#{$size}, .#{$abbrev}y#{$infix}-#{$size} { #{$prop}-bottom: $length !important; }
        .#{$abbrev}l#{$infix}-#{$size}, .#{$abbrev}x#{$infix}-#{$size} { #{$prop}-left: $length !important; }
      }
    }
    
    // 保留原有的margin-auto工具类
    .m#{$infix}-auto { margin: auto !important; }
    .mt#{$infix}-auto, .my#{$infix}-auto { margin-top: auto !important; }
    .mr#{$infix}-auto, .mx#{$infix}-auto { margin-right: auto !important; }
    .mb#{$infix}-auto, .my#{$infix}-auto { margin-bottom: auto !important; }
    .ml#{$infix}-auto, .mx#{$infix}-auto { margin-left: auto !important; }
  }
}

方案二：调整原有$spacers的基准值 #

如果你不想新增变量，也可以直接修改$spacers的取值，把基准单位改成px或者直接缩小数值，然后让大屏通过断点放大间距：

// 原$spacers改成小屏适配的版本
$spacers: (
  0: 0,
  1: 2px,
  2: 4px,
  3: 8px,
  4: 12px,
  5: 16px
);

// 定义大屏放大系数
$spacer-scale: 1.5;

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    // 大屏断点（非xs）时放大间距
    $current-scale: if($breakpoint != xs, $spacer-scale, 1);
    
    @each $prop, $abbrev in (margin: m, padding: p) {
      @each $size, $length in $spacers {
        $scaled-length: $length * $current-scale;
        .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $scaled-length !important; }
        .#{$abbrev}t#{$infix}-#{$size}, .#{$abbrev}y#{$infix}-#{$size} { #{$prop}-top: $scaled-length !important; }
        .#{$abbrev}r#{$infix}-#{$size}, .#{$abbrev}x#{$infix}-#{$size} { #{$prop}-right: $scaled-length !important; }
        .#{$abbrev}b#{$infix}-#{$size}, .#{$abbrev}y#{$infix}-#{$size} { #{$prop}-bottom: $scaled-length !important; }
        .#{$abbrev}l#{$infix}-#{$size}, .#{$abbrev}x#{$infix}-#{$size} { #{$prop}-left: $scaled-length !important; }
      }
    }
    
    // 保留margin-auto工具类
    .m#{$infix}-auto { margin: auto !important; }
    .mt#{$infix}-auto, .my#{$infix}-auto { margin-top: auto !important; }
    .mr#{$infix}-auto, .mx#{$infix}-auto { margin-right: auto !important; }
    .mb#{$infix}-auto, .my#{$infix}-auto { margin-bottom: auto !important; }
    .ml#{$infix}-auto, .mx#{$infix}-auto { margin-left: auto !important; }
  }
}

额外提示 #

• 如果你用的是Bootstrap 3默认的$grid-breakpoints，记得确认xs是最小断点（默认对应768px以下屏幕）
• 可以根据自己的设计需求，调整$spacers-xs或$spacer-scale的数值，直到小屏间距看起来合适为止

内容的提问来源于stack exchange，提问作者haxpanel