如何让Bootstrap列之间的垂直分隔线高度始终保持一致？

我太懂这个痛点了——当导航栏里各列的内容数量不一样时，垂直分隔线跟着内容高度走，没法撑满整个栏的高度，看着特别不协调。之前用table布局的思路其实有点跑偏了，反而破坏了Bootstrap的flex栅格体系，所以才会引出其他问题。

咱们换个思路，利用Bootstrap原生的flex布局特性来解决，既不破坏响应式，又能让分隔线高度和列高度完全一致：

第一步：修正HTML语义问题（很重要） #

首先你的HTML里有个小问题：<li>元素不能直接放在<div>里，必须嵌套在<ul>或者<ol>中，这是HTML的语义规范，也能避免一些潜在的布局冲突：

<nav id="subCategories" class="row navbar bg-light">
  <div class="col-lg-3 col-4">
    <h6>BIKES</h6>
    <ul class="nav flex-column">
      <li class="nav-item">
        <a class="nav-link subCategory" href="#">FULL SUSPENSION</a>
      </li>
      <li class="nav-item">
        <a class="nav-link subCategory" href="#">HARDTAIL</a>
      </li>
      <li class="nav-item">
        <a class="nav-link subCategory" href="#">E-BIKES</a>
      </li>
    </ul>
  </div>
  <div class="col-lg-3 col-4">
    <h6>EQUIPMENT</h6>
    <ul class="nav flex-column">
      <li class="nav-item">
        <a class="nav-link subCategory" href="#">HELMETS</a>
      </li>
      <li class="nav-item">
        <a class="nav-link subCategory" href="#">PROTECTORS</a>
      </li>
      <li class="nav-item">
        <a class="nav-link subCategory" href="#">GLOVES</a>
      </li>
      <li class="nav-item">
        <a class="nav-link subCategory" href="#">JERSEYS</a>
      </li>
      <li class="nav-item">
        <a class="nav-link subCategory" href="#">PANTS</a>
      </li>
    </ul>
  </div>
  <div class="col-lg-3 col-4">
    <h6>PARTS</h6>
    <ul class="nav flex-column">
      <li class="nav-item">
        <a class="nav-link subCategory" href="#">GPS</a>
      </li>
      <li class="nav-item">
        <a class="nav-link subCategory" href="#">LIGHTS</a>
      </li>
    </ul>
  </div>
  <div class="col-lg-3 col-4">
    <h6>FOR THE BIKE</h6>
    <ul class="nav flex-column">
      <li class="nav-item">
        <a class="nav-link subCategory" href="#">SCOOTER PARTS</a>
      </li>
      <li class="nav-item">
        <a class="nav-link subCategory" href="#">BMX PARTS</a>
      </li>
      <li class="nav-item">
        <a class="nav-link subCategory" href="#">TYRES/TUBES</a>
      </li>
      <li class="nav-item">
        <a class="nav-link subCategory" href="#">CHAINS</a>
      </li>
    </ul>
  </div>
</nav>

第二步：用CSS实现等高分隔线 #

核心思路是：让每个col-*列撑满父容器的高度，然后用伪元素给每一列（除了最后一列）添加右侧的垂直分隔线，这样分隔线高度就和列的高度完全一致了：

#subCategories {
  /* 去掉之前的align-items: flex-start，让列默认撑满高度 */
  /* align-items: flex-start; */
  min-height: 100%; /* 确保导航栏至少有一个基础高度 */
}

#subCategories .col-lg-3.col-4 {
  position: relative;
  display: flex;
  flex-direction: column; /* 让列内的h6和ul垂直排列 */
}

/* 给除了最后一列的所有列添加右侧分隔线 */
#subCategories .col-lg-3.col-4:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background-color: grey;
}

/* 可选：调整列内内容的间距，让导航更美观 */
#subCategories h6 {
  margin-bottom: 1rem;
}

#subCategories .nav {
  flex-grow: 1; /* 让列表占满列的剩余空间，h6固定在顶部 */
}

为什么之前的方案有问题？ #

你之前尝试的display: table和display: table-cell会完全覆盖Bootstrap栅格的flex布局逻辑，导致响应式布局失效（比如小屏幕下的列堆叠可能出问题），而且和Bootstrap自带的row、col样式冲突，所以才会出现其他异常。而上面的方案完全基于Bootstrap的原生flex特性，既能保持响应式，又完美解决了分隔线高度一致的问题。

内容的提问来源于stack exchange，提问作者Lukas Luke Stateczny