html - 更改引导导航栏上活动锚链接的边框颜色

Question

我在 Bootstrap 中编写导航栏。当锚链接处于活动状态或被选中时，它周围有一个黑色边框，生成的文本是白色的。目标是使它没有边框/背景颜色，并且在选择文本时文本为橙色而不是白色。如果您能就如何更改代码提供一些建议，我们将不胜感激。

下图说明了它的外观。

nav {
  font-family: 'Poppins', sans-serif;
  position: sticky;
  border: 0;
}

.nav-link {
  margin-top: 0em;
  margin-left: 1.5em;
  font-size: 1.2em;
}

@media screen and (min-width: 768px) {
  .nav-link {
    margin-top: 1.0em;
    margin-left: 1.5em;
    font-size: 1.2em;
  }
}

.navbar-light .nav-item.active .nav-link,
.navbar-light .nav-item .nav-link:active,
.navbar-light .nav-item .nav-link:focus,
.navbar-light .nav-item:hover .nav-link {
  color: #FC9639;
}

.navbar-light .nav-item .nav-link:focus {
  background-color: white;
}

.icon-bar {
  background-color: #000000 !important;
  border: 0;
}

.navbar-light {
  background-color: white !important;
  border: none !important;
  border-width: 0!important;
}

.logo {
  margin-left: 25px;
  width: 80px;
  height: 80px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-light bg-white navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>    
      </button>
      <!-- <a class="navbar-brand" href="#">WebSiteName</a> -->
      <a href="index.html"><img src="fusebloomLogo.png" alt="FuseBloom logo" class="logo" /></a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active nav-item">
          <a class="nav-link" href="#home">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#mission">Mission</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#reviews">Reviews</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#process">Process</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

标签： htmlcsstwitter-bootstrapnavbar