如何使用Bootstrap 5面包屑创建箭头样式的步骤指示器

你当前的自定义面包屑使用菱形作为步骤间分隔，要替换为符合页面语言方向（LTR向右、RTL向左）的Chevron箭头，只需修改.breadcrumb-custom的CSS样式，用SVG箭头替代菱形即可：

修改后的CSS代码 #

.breadcrumb-chevron {
    --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    gap: .5rem;
}

.breadcrumb-chevron .breadcrumb-item {
    display: flex;
    gap: inherit;
    align-items: center;
    padding-left: 0;
    line-height: 1;
}

.breadcrumb-chevron .breadcrumb-item::before {
    gap: inherit;
    float: none;
    width: 1rem;
    height: 1rem;
}

.breadcrumb-custom .breadcrumb-item {
    position: relative;
    flex-grow: 1;
    padding: .75rem 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.breadcrumb-custom .breadcrumb-item::before {
    display: none;
}

/* 替换菱形为Chevron箭头 */
.breadcrumb-custom .breadcrumb-item::after {
    position: absolute;
    top: 50%;
    right: -0.5rem;
    z-index: 1;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-top: -0.5rem;
    content: "";
    background-image: var(--bs-breadcrumb-divider);
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
}

/* RTL布局下翻转箭头方向 */
[dir="rtl"] .breadcrumb-custom .breadcrumb-item::after {
    transform: scaleX(-1);
    right: auto;
    left: -0.5rem;
}

.breadcrumb-custom .breadcrumb-item:first-child {
    padding-left: 1.5rem;
}

.breadcrumb-custom .breadcrumb-item:last-child {
    padding-right: 1.5rem;
}

.breadcrumb-custom .breadcrumb-item:last-child::after {
    display: none;
}

对应的HTML代码 #

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<!-- LTR布局示例 -->
<div class="container">
  <nav aria-label="breadcrumb" class="my-3">
      <ol class="breadcrumb breadcrumb-custom overflow-hidden text-center bg-body-tertiary border rounded-3">
              <li class="breadcrumb-item text-bg-success">
  Step 1            </li>
              <li class="breadcrumb-item text-bg-primary active" aria-current="page">
                          <i class="fa-solid fa-pen-to-square"></i>
                      <a class="fw-semibold text-decoration-none text-white" href="/blank1/Subscription/4c084aht14hc67nxhfpa8e9kw0/Signup/Step/Payment">
                          Step 2
                      </a>
              </li>
      </ol>
  </nav>
</div>

<!-- RTL布局示例（可选） -->
<div class="container" dir="rtl">
  <nav aria-label="breadcrumb" class="my-3">
      <ol class="breadcrumb breadcrumb-custom overflow-hidden text-center bg-body-tertiary border rounded-3">
              <li class="breadcrumb-item text-bg-success">
  الخطوة 1            </li>
              <li class="breadcrumb-item text-bg-primary active" aria-current="page">
                          <i class="fa-solid fa-pen-to-square"></i>
                      <a class="fw-semibold text-decoration-none text-white" href="#">
                          الخطوة 2
                      </a>
              </li>
      </ol>
  </nav>
</div>

关键修改说明 #

• 移除原菱形样式的旋转、圆角和阴影属性，改用Bootstrap内置的Chevron SVG作为箭头背景
• 调整箭头的位置与尺寸，确保在步骤间居中显示
• 通过[dir="rtl"]选择器自动翻转箭头方向，适配从右到左的语言布局
• 保留原有步骤背景色（text-bg-success、text-bg-primary）和容器圆角样式

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