CSS实现居中对齐文本左侧添加水平分隔线的方法（Bootstrap4）

实现方案 #

直接基于Bootstrap4自带的Flex布局就能实现，不需要额外引入第三方库，步骤如下：

1. 先修正原代码里不符合HTML规范的结构：原代码在<ul>里直接套<div>标签，容易出现渲染错位，调整为标准列表嵌套结构
2. 给每个导航项做横向Flex布局：左侧放固定尺寸的分隔线块，右侧放文本组，整个组合通过Flex居中，保证文本本身保持居中对齐
3. 分隔线用块元素的背景实现，比默认的<hr>标签更容易控制尺寸和边距

调整后的页面代码 #

<div class="nav-items">
  <ul class="list-unstyled">
    <li class="pb-5">
      <div class="d-flex align-items-center justify-content-center">
        <!-- 左侧分隔线块，mr-3控制和右侧文本的间距 -->
        <div class="nav-divider mr-3"></div>
        <!-- 右侧居中文本组 -->
        <div class="text-center">
          <a href="#" class="text-decoration-none">
            <h2 class="sidebar-first-item mb-1">About</h2>
          </a>
          <p class="mb-0 text-muted">Behind the brand // Meet the team</p>
        </div>
      </div>
    </li>

    <li class="pb-5">
      <div class="d-flex align-items-center justify-content-center">
        <div class="nav-divider mr-3"></div>
        <div class="text-center">
          <a href="#" class="text-decoration-none">
            <h2 class="mb-1">Our Work</h2>
          </a>
          <p class="mb-0 text-muted">Take a look at our marvelous creations</p>
        </div>
      </div>
    </li>

    <li class="pb-5">
      <div class="d-flex align-items-center justify-content-center">
        <div class="nav-divider mr-3"></div>
        <div class="text-center">
          <a href="#" class="text-decoration-none">
            <h2 class="mb-1">Services</h2>
          </a>
          <p class="mb-0 text-muted">Learn more about what we can do for you</p>
        </div>
      </div>
    </li>

    <li class="pb-5">
      <div class="d-flex align-items-center justify-content-center">
        <div class="nav-divider mr-3"></div>
        <div class="text-center">
          <a href="#" class="text-decoration-none">
            <h2 class="sidebar-last-item mb-1">Contact</h2>
          </a>
          <p class="mb-0 text-muted">Get in touch today. Let's make some magic</p>
        </div>
      </div>
    </li>
  </ul>
</div>

配套自定义样式 #

.nav-divider {
  width: 60px; /* 分隔线长度，按需调整 */
  height: 2px; /* 分隔线粗细 */
  background: #ccc; /* 分隔线颜色，替换为项目主色即可 */
  flex-shrink: 0; /* 防止Flex布局挤压变形分隔线 */
}

/* 小屏适配，自动缩短分隔线长度 */
@media (max-width: 576px) {
  .nav-divider {
    width: 30px;
  }
}

注意事项 #

以上写法兼容所有Bootstrap4版本，没有使用仅Bootstrap5支持的API。
用align-items: center可以保证分隔线和文本块的中线对齐，不会出现分隔线上下错位的问题。

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