Bootstrap Navbar自定义 - 透明，除了新的线/栏

Question

我正在自定义bootstrap navbar是透明的，并且能够在我的CSS上使用！

.navbar-default {
  background-color: transparent !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav class="navbar transparent navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
      <a href="contact.html" class="navbar-brand">Meredith Bristol</a>
    </div>
    <div id="navbarCollapse" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="contact.html">Contact Me</a></li>
        <li><a href="personal.html">About Meredith</a></li>
        <li><a href="resumewebsite.html">Employment History</a></li>
        <li><a href="education.html">Education</a></li>
      </ul>
    </div>
  </div>
</nav>

但是，我现在看到了纳维斯本身下方的水平线/栏，请单击此处查看示例。什么是创建这一行？

Answer 1

它是Bootstrap添加的border-bottom，因此您还需要使其颜色透明（或删除）：

/* only to show there is no more border/background on the navbar */
body {
  background-color: lightblue!important;
}
/**/
.navbar-default {
  background-color: transparent !important;
  border-color: transparent !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav class="navbar transparent navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
      <a href="contact.html" class="navbar-brand">Meredith Bristol</a>
    </div>
    <div id="navbarCollapse" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="contact.html">Contact Me</a></li>
        <li><a href="personal.html">About Meredith</a></li>
        <li><a href="resumewebsite.html">Employment History</a></li>
        <li><a href="education.html">Education</a></li>
      </ul>
    </div>
  </div>
</nav>