如何在Bootstrap 5中添加复刻Tailwind space-between效果的自定义工具类

实现方案 #

你可以通过Bootstrap 5自带的Utility API直接实现带子元素选择器的自定义工具类，无需额外写独立CSS规则，具体操作如下：

步骤1：在SCSS文件中添加自定义配置 #

在你的项目SCSS入口文件中，导入Bootstrap核心SCSS之前先定义自定义工具类规则：

// 先导入Bootstrap工具类依赖的核心模块
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

// 合并自定义工具类到Bootstrap原有工具类配置中
$utilities: map-merge(
  $utilities,
  (
    // 水平间距space-x系列，用法和Tailwind完全一致
    "space-x": (
      responsive: true, // 开启响应式支持，可使用md:space-x-3这类前缀
      class: space-x, // 生成的类名前缀
      property: margin-left, // 占位属性，无实际作用，仅满足API必填要求
      css-var: false, // 关闭CSS变量输出
      rtl: true, // 支持RTL布局自动适配
      // 核心：自定义生成的选择器和属性规则
      each: (
        "> :not([hidden]) ~ :not([hidden])": "margin-left: $value"
      ),
      // 间距档位，和Bootstrap默认间距体系保持一致，可自行增减
      values: (
        0: 0,
        1: $spacer * .25,
        2: $spacer * .5,
        3: $spacer,
        4: $spacer * 1.5,
        5: $spacer * 3,
      )
    ),
    // 垂直间距space-y系列
    "space-y": (
      responsive: true,
      class: space-y,
      property: margin-top,
      css-var: false,
      rtl: true,
      each: (
        "> :not([hidden]) ~ :not([hidden])": "margin-top: $value"
      ),
      values: (
        0: 0,
        1: $spacer * .25,
        2: $spacer * .5,
        3: $spacer,
        4: $spacer * 1.5,
        5: $spacer * 3,
      )
    )
  )
);

// 最后导入Bootstrap核心SCSS
@import "bootstrap/scss/bootstrap";

步骤2：使用自定义工具类 #

直接给父元素添加对应类名即可，子元素之间会自动生成间距，不会给第一个元素前、最后一个元素后加间距，同时自动忽略带hidden属性的元素：

<!-- 水平排列的子元素之间加24px间距 -->
<div class="d-flex space-x-4">
  <div>子元素1</div>
  <div>子元素2</div>
  <div hidden>被忽略的元素</div>
  <div>子元素3</div>
</div>

<!-- 垂直排列的子元素之间加16px间距，md及以上屏幕才生效 -->
<div class="space-y-3 md:space-y-4">
  <div>子元素1</div>
  <div>子元素2</div>
  <div>子元素3</div>
</div>

核心逻辑说明 #

Bootstrap Utility API提供的each参数支持自定义每个档位生成的CSS规则，不需要默认的单元素选择器结构，直接生成你需要的子元素相邻兄弟选择器规则，完全复刻你需要的Tailwind space工具类行为。你可以根据需求自行调整values里的间距档位，或者关闭responsive参数取消响应式支持。

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