如何扩展Bootstrap 5.3的border-bottom宽度尺寸选项？

Bootstrap默认的border-1至border-5尺寸类仅作用于全边框，单独使用border-bottom时无法直接复用这些类——原因是border-bottom的宽度由全局变量--bs-border-width控制，且默认样式带有!important，导致全边框尺寸类的优先级无法覆盖它。以下是几种可行的解决方案：

1. 自定义单边边框宽度工具类（推荐） #

直接通过SCSS循环生成专属的单边边框宽度类，确保样式优先级足够覆盖Bootstrap默认规则：

// 复用Bootstrap内置的边框宽度变量，也可自定义值
$border-widths: (1: 1px, 2: 2px, 3: 3px, 4: 4px, 5: 5px);

// 生成border-bottom-1到border-bottom-5类
@each $size, $width in $border-widths {
  .border-bottom-#{$size} {
    border-bottom-width: $width !important;
  }
}

使用方式：

<div class="border-bottom border-bottom-3">底部边框宽度为3px</div>

同理，可通过相同逻辑生成border-top-*、border-left-*等其他单边边框的尺寸类。

2. 扩展Bootstrap工具类映射 #

通过修改utilities.scss，向Bootstrap的工具类系统中添加单边边框宽度配置，让框架自动生成所需类：

$utilities: map-merge(
  $utilities,
  (
    "border-bottom-width": (
      property: border-bottom-width,
      class: border-bottom,
      values: $border-widths,
      important: true, // 强制优先级，覆盖默认样式
    )
  )
);

编译后会自动生成border-bottom-1至border-bottom-5类，使用方式与上述一致，更贴合Bootstrap工具类的设计逻辑。

3. 利用全局变量临时覆盖（局限性大） #

修改全局变量--bs-border-width会影响所有默认边框的宽度，包括全边框和其他单边边框。若仅需给单个元素调整底部边框宽度，可通过局部变量覆盖：

<div class="border-bottom" style="--bs-border-width: 4px;">底部边框宽度为4px</div>

或自定义类：

.border-bottom-thick {
  --bs-border-width: 4px;
}

<div class="border-bottom border-bottom-thick">底部边框宽度为4px</div>

注意：这种方法会让该元素上所有使用--bs-border-width的边框（如同时添加border-top）都变为该宽度，仅适合单一边框场景。

你之前的SCSS配置无效的原因 #

你修改的是border-width工具类的配置，该类仅作用于全边框的border-width属性；而border-bottom的宽度由单独的border-bottom-width属性控制（Bootstrap默认设置为var(--bs-border-width) !important），两者作用的CSS属性不同，因此全边框尺寸类无法影响单边边框的宽度。

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