如何从 Bootstrap 3 中的导航栏折叠中删除不透明度（透明度）？答案

【问题标题】：How to remove opacity (transparency) from the navbar-collapse in Bootstrap 3?如何从 Bootstrap 3 中的导航栏折叠中删除不透明度（透明度）？
【发布时间】：2015-09-11 16:08:42
【问题描述】：

我正在使用 bootstrap 3。我有一个透明的导航栏和一个背景图像。当我的分辨率是智能手机或平板电脑视图时，我的菜单栏会折叠成一个按钮。当我单击按钮时，我的菜单会弹出。但是，因为我的父元素是透明的，所以我的 navbar-collapse 也是透明的，并且菜单链接在背景图像中看不到。我需要使用哪个属性来使我的折叠菜单变成纯白色？

<header class="container">
    <div class="bg"> <!--Background Image-->
    <div class= "number">
        <div class="number-wrapper">
            <span id="tel">(123) 456 7890 </span>
        </div>
    </div>
    <nav class="navbar navbar-default" role="navigation">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <img src="images/logo2.png" class="img-responsive" alt="Sample Image"/>
            </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="index.html">Menu 1</a></li>
                <li><a href="#">Menu 2</a></li>
                <li><a href="#">Menu 3</a></li>
                <li><a href="contact-link.html">Contact Us</a></li>
                <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span style="color: #27A9E1">Menu 4 </span><span class="caret"  style="color: #27A9E1"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
</nav><!--The end of the menu bar-->
</div>
</header>

CSS:

nav.navbar.navbar-default {
border-top: none;
background-color: #FFFFFF;
opacity: 0.7;
}

【问题讨论】：

请在您的问题中创建一个代码 sn-p，以便他人更轻松地回复。

标签： css twitter-bootstrap-3

【解决方案1】：

封闭元素的不透明度不是要走的路，因为一旦声明不透明度，所有封闭元素将继承相同的不透明度，这是无法逆转的。解决方案？使用background-color上的alpha通道，像这样

background-color: rgba (256,256,256, 0.7)

示例：http://www.bootply.com/s92TKwxRMg

你会看到我也在下拉列表中声明了它，假设这就是你所追求的。

【讨论】：

是的，这个 background: rgba (255, 255, 255, 1.0) 设置将消除默认的引导透明功能。

【解决方案2】：

你可以这样试试

@media (max-width:480px) {
   body > .navbar-default {
    background-color: #2c3e50;
  }
}

因此，当页面调整大小直到达到 480 像素时，此代码将添加带有颜色的默认导航栏。希望这会有所帮助。

【讨论】：