使用Bootstrap5实现容器内Stepper步骤条div元素的对齐布局

当前溢出效果如下图：

修复方案 #

根因说明 #

bs-stepper默认未适配父容器100%宽度规则，圆形图标采用固定尺寸，且步骤节点的flex属性未设置弹性缩放，窄屏场景下会溢出外层白色容器。

操作步骤 #

1. 新增自定义响应式CSS规则

/* 适配步骤节点弹性缩放 */
.bs-stepper .step {
  flex: 1 1 auto !important;
  padding: 0 !important;
}

/* 不同断点下动态调整圆形图标尺寸 */
@media (max-width: 576px) {
  .bs-stepper-circle {
    width: 2rem !important;
    height: 2rem !important;
    line-height: 2rem !important;
    font-size: 0.9rem !important;
  }
  .bs-stepper-header {
    padding: 0 0.5rem !important;
  }
}
@media (min-width: 576px) {
  .bs-stepper-circle {
    width: 2.5rem !important;
    height: 2.5rem !important;
    line-height: 2.5rem !important;
    font-size: 1rem !important;
  }
  .bs-stepper-header {
    padding: 0 1rem !important;
  }
}

2. 修改原有HTML结构，给bs-stepper相关节点添加宽度适配类

<div class="container flex-grow-1 flex-shrink-0 py-5">
  <div class="mb-5 p-4 bg-white shadow-sm">
    <h1 class="text-center">Plan</h1>
    <!-- 新增w-100类保证步骤条占满父容器宽度 -->
    <div id="stepper1" class="bs-stepper w-100">
      <div class="bs-stepper-header w-100" role="tablist">
        <!-- General Information -->
        <div class="step active" data-target="#test-l-1">
          <button
            type="button"
            class="step-trigger"
            role="tab"
            id="stepper1trigger1"
            aria-controls="test-l-1"
            aria-selected="true"
          >
            <span class="bs-stepper-circle">1</span>
            <!-- <span class="bs-stepper-label">General Information</span> -->
          </button>
        </div>
        <!-- 若需要步骤分割线可补充下面的line节点，不需要可直接删除 -->
        <div class="line"></div>
        <!-- Summary -->
        <div class="step" data-target="#test-l-2">
          <button
            type="button"
            class="step-trigger"
            role="tab"
            id="stepper1trigger2"
            aria-controls="test-l-2"
            aria-selected="false"
          >
            <span class="bs-stepper-circle">2</span>
            <!-- <span class="bs-stepper-label">Summary</span> -->
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

效果验证 #

修改后任意调整页面宽度，步骤圆形图标都会跟随断点自动缩放，始终包裹在白色容器内，不会出现溢出问题。

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