如何在Bootstrap 4中扩展间距工具的margin值至3rem以上？

嘿，作为常年和Bootstrap打交道的开发者，我太懂你这种被预设间距工具类卡脖子的感觉了！针对你的需求，有两种非常实用的解决路径，咱们来详细说说：

Bootstrap 4本身就是基于Sass构建的，所以修改它的源变量来扩展工具类，是最贴合框架设计思路的做法，能保持代码的一致性和可维护性。

具体步骤如下：

1. 找到Bootstrap的核心变量文件_variables.scss，里面有个名为$spacers的映射变量，它定义了所有间距工具类（比如mt-*、pb-*）的取值。默认的$spacers大概是这样的：

$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3
);

这里的$spacer默认是1rem（对应16px的根字体大小），所以最大的mt-xl-5对应的是3rem（48px），确实远达不到你需要的150px。

2. 在$spacers里添加新的键值对，来定义你需要的大间距。比如150px换算成rem是9.375rem（150÷16），你可以这样写：

$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
  6: 9.375rem // 对应150px，基于16px根字体
);

如果你觉得硬写rem不够直观，也可以用Sass的计算式来自动转换：

6: 150px / 16px * 1rem

3. 重新编译你的Sass项目，之后就会自动生成mt-xl-6、pt-xl-6这类新的工具类，直接在HTML里使用就行，和原生Bootstrap工具类的用法完全一致。

如果你不想折腾Sass编译的流程，或者只是需要解决这一个单独的间距问题，直接写自定义CSS是最快的方式：

1. 给你的标语区块添加一个自定义类名，比如nav-banner-gap-xl。
2. 针对Bootstrap的xl断点（1200px及以上）写对应的样式：

@media (min-width: 1200px) {
  .nav-banner-gap-xl {
    margin-top: 150px;
    /* 如果遇到Bootstrap默认样式优先级更高的情况，可以加上!important：
    margin-top: 150px !important;
    */
  }
}

3. 在HTML里把这个类加到目标元素上即可，比如：

<div class="nav-banner-gap-xl">你的标语内容</div>

小建议 #

如果你的项目会长期基于Bootstrap开发，我强烈推荐用Sass扩展的方式，这样能和Bootstrap的设计系统保持统一，后续维护和扩展其他间距也更方便；如果只是临时解决这一个间距问题，自定义CSS的方式更省心，不用改动框架源文件。

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