html - 如何使 Bootstrap 导航栏透明

Question

我正在尝试使我使用 bootstrap 制作的导航栏透明。我已经尝试过以前的 stackoverflow 解决方案，但没有一个有效。这是我的代码:

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
   <a class="navbar-brand mb-0 h1" href="#">Navbar </a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" 
       aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
   </button>
   <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
   </div>
   <div class="aa">
    <form class="form-inline my-2 my-lg-0">
   <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
   <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
 </form>
  </div>
  <div class="">
  <ul class="nav navbar-nav navbar-right">
   <li class="nav-link"><a class="nav-link" href="#">Login</a></li>
  </ul>
 </div>
 </nav>

我试过这个css to make bootstrap navbar transparent但它对我不起作用。

Answer 1

就是这样: 只需将其添加到所有链接标签下方的头部部分:

<style>
        .navbar {
            position: relative;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-pack: justify;
            justify-content: space-between;
            padding: .5rem 1rem;
            opacity: 0.5;
        }
    </style>

检查:https://jsfiddle.net/sugandhnikhil/32kuLbmd/

谢谢!!