带Bootstrap的透明固定顶部导航栏

Question

HTML：

    <nav class="navbar navbar-default navbar-fixed-top navbar-transparent">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

自定义CSS（基本引导程序CSS除外）：

.navbar-transparent {
    background:transparent;
    background-image: none;
    border-color: transparent;
}

我查看了Stack Overflow上的其他帖子以及谷歌上的其他帖子，但我似乎找不到让导航栏完全透明的方法。

到目前为止它看起来像这样，当然必须有一种更简单的方法来设置导航栏透明而不是必须手动编辑这些类中的所有类和子类以及元素？

Answer 1

我想这很有效。如果有人有更好的解决方法，请回答。

@media screen and (min-width: 680px) {
.navbar-transparent {
    background: transparent;
    background-image: none;
    border-color: transparent;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
    background: transparent;
    background-image: none;
    border-color: transparent;
}}

Answer 2

您必须覆盖css中的“.active”类。

您已经在代码中使用了（预定义的引导程序）css-class：

＆LT; li class =“active”＆gt;＆lt; a href =“＃”＆gt; Home＆lt; / a＆gt;＆lt; / li＆gt;

尝试：

#navbar ul li.active {
    background:transparent;
    background-image: none;
    border-color: transparent;
}

#navbar ul li:hover {        // to overwrite when you :hover the list items
    background:transparent;
    background-image: none;
    border-color: transparent;
}