用不同的颜色的边界

Question

我试图使用bootsrap实现下面的布局，但没有成功。

我使用bootstrap导航，但是你知道如何在链接下方有一个灰色边框，当活动项目处于活动状态时，是否有一个不同颜色的边框？

工作示例：https://jsfiddle.net/b6yqLc2d/

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 class="nav d-flex justify-content-center mt-3">
          <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>

Answer 1

只需在nav-link添加边框而不指定颜色：

.text-gray {
  color: gray;
}

.nav-link {
  border-bottom: 3px solid;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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 class="nav d-flex justify-content-center mt-3">
          <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>

Answer 2

.text-gray{
  color:gray;
  border-bottom: 1px solid grey;
}

.active{

  border-bottom: 1px solid skyblue;
}

Answer 3

.nav-link {
 border-bottom: 3px solid grey;
}
.nav-link.active {
 border-bottom-color: #007bff;
}

这是您正在寻找的解决方案

Answer 4

我从未见过多种颜色的边框，但每个链接都有自己的边框，因此每个边框可以有不同的颜色。

尝试将此添加到jsfiddle中的CSS：

a{
  border-bottom: solid 3px #ccc
}
a:hover{
  border-bottom: solid 3px #007bff;
}
a.active{
  border-bottom: solid 3px #007bff;
}