如何用Bootstrap实现导航栏灰色下边框及激活项异色边框？

嘿，我来帮你搞定这个导航栏的样式需求！你想要给导航链接加灰色底部边框，同时激活项显示不同颜色的边框，其实只需要在现有Bootstrap代码基础上添加一点自定义CSS就能实现，效果完全符合你的预期。

修改后的完整代码 #

首先是HTML部分（基本保留你的结构，仅做了小调整）：

<div class="bg-light-gray2">
  <div class="container nopadding py-4">
    <div class="row justify-content-center align-items-center">
      <div class="col-12 col-lg-3">
        <h1 class="h5 text-center text-md-left mb-4 mb-lg-0 text-heading-blue font-weight-bold">Title</h1>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <!-- 给nav加自定义类方便样式控制，也可以直接用.nav选择器 -->
        <nav class="nav d-flex justify-content-center mt-3 nav-custom">
          <a class="nav-link active" href="#">Active</a>
          <a class="nav-link text-gray" href="#">Link</a>
          <a class="nav-link text-gray" href="#">Link</a>
          <a class="nav-link text-gray" href="#">Link</a>
        </nav>
      </div>
    </div>
  </div>
</div>

然后是关键的CSS部分：

/* 给导航容器添加灰色底部边框 */
.nav-custom {
  border-bottom: 1px solid #dee2e6; /* Bootstrap默认浅灰色，可替换成你需要的灰色值 */
}

/* 调整导航链接内边距，让边框位置更协调 */
.nav-custom .nav-link {
  position: relative;
  padding-bottom: 0.75rem;
  /* 负margin让激活项边框与容器边框重叠，避免双层线条 */
  margin-bottom: -1px;
}

/* 激活项样式：替换底部边框为高亮色，可选同步修改文字颜色 */
.nav-custom .nav-link.active {
  border-bottom: 2px solid #0d6efd; /* Bootstrap主蓝色，可自定义颜色 */
  color: #0d6efd !important; /* 可选：让激活项文字同步变色 */
}

实现原理说明 #

• 先给整个导航容器添加灰色底部边框，作为默认的底部线条；
• 给每个导航链接设置margin-bottom: -1px，这样激活项的底部边框就能刚好覆盖容器的灰色边框，不会出现双层线条的尴尬；
• 激活项的边框设置得比容器边框粗一点（比如2px），视觉上更突出，颜色换成你需要的高亮色即可。

你可以根据自己的设计需求调整边框颜色、粗细，还有导航链接的内边距值，完全适配你的风格。

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