html - Bootstrap 导航栏透明

Question

出于某种原因，我无法更改导航栏。我试图让它透明。我知道 bootstrap 导航栏通常是一个图像，所以我包含了 background-image: none。

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header page-scroll">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
      </button>
    <a class="navbar-brand page-scroll" href="#intro">Eric West</a>
  </div>
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
        <li class="hidden">
          <a class="page-scroll" href="#page-top"></a>
        </li>
        <li>
          <a class="page-scroll" href="#about">About</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <a class="page-scroll" href="#projects">Projects</a>
        </li>
        <li>
          <a class="page-scroll" href="#contact">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

CSS:

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

Answer 1

不要删除 .navbar-inverse(或 .navbar-default)，除非您计划添加一些自定义 CSS 来弥补它，因为它们会向导航添加属性，特别是 navbar-toggle 类。

如果没有其中之一，您将从导航中删除大量 CSS，并且 navbar-toggle 在 768px 以下的设备上将不可见，它会在那里并且可操作，但您不会能够看到它。

我会添加一个自定义导航类并使用它来覆盖您需要更改的属性。

查看示例，其中包括一个有附加属性和一个没有附加属性的例子。

body,
html {
  background: grey;
  margin-top: 50px;
}
.navbar.navbar-custom {
  background-color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-custom navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header page-scroll">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-1"> <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 page-scroll" href="#intro">Custom Navbar</a>

    </div>
    <div class="collapse navbar-collapse navbar-1">
      <ul class="nav navbar-nav">
        <li class="hidden">
          <a class="page-scroll" href="#page-top"></a>

        </li>
        <li> <a class="page-scroll" href="#about">About</a>

        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li> <a class="page-scroll" href="#projects">Projects</a>

        </li>
        <li> <a class="page-scroll" href="#contact">Contact</a>

        </li>
      </ul>
    </div>
  </div>
</nav>


<nav class="navbar">
  <div class="container-fluid">
    <div class="navbar-header page-scroll">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-2"> <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 page-scroll" href="#intro">Navbar Only</a>

    </div>
    <div class="collapse navbar-collapse navbar-2">
      <ul class="nav navbar-nav">
        <li class="hidden">
          <a class="page-scroll" href="#page-top"></a>

        </li>
        <li> <a class="page-scroll" href="#about">About</a>

        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li> <a class="page-scroll" href="#projects">Projects</a>

        </li>
        <li> <a class="page-scroll" href="#contact">Contact</a>

        </li>
      </ul>
    </div>
  </div>
</nav>