Bootstrap NavBar不透明性，适用于小屏幕和大屏幕

Question

我想让Navbar顶栏的不透明度为0.75，但Navbar下拉菜单（出现在小屏幕上）的不透明度为1.0； 我当前的代码在小屏幕上效果很好（使用rgba彩色符号来避免将父级-Toolbar-子级-Dropdownmenu-（将不透明性设置为单独的值时）之间的继承问题）（黄色是“不透明”； 紫色为“不透明”]：

但是在大屏幕上，我现在得到：

只是左，右角不是不透明的，顶栏的主体是不透明的； 而我希望整个顶部栏不是不透明的（显然是相同的颜色）。

我知道当下拉菜单折叠到顶部栏中时，它具有不透明度功能，但这不是我想要的。

这是一个小提琴，显示了更改屏幕宽度时的行为： http : //jsfiddle.net/musicformellons/no2wfz9m/4/

这个css部分设置“下拉菜单”的不透明度（但显然对所有菜单...）：

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: rgb(222, 145, 139);
    background-color: rgba(155,155,255,1);
}

Answer 1

只需将.navbar.navbar-custom .navbar-collapse放入媒体查询中即可。

*我添加了一个自定义类（ navbar-custom ），因此CSS Core不会被直接覆盖。

 .navbar.navbar-custom { margin-bottom: 19px; background-color: rgba(224, 178, 63, 0.75); border-color: rgba(192, 40, 8, 0.75) } /*brandname*/ .navbar.navbar-custom .navbar-brand { color: rgba(255, 217, 217, 1); padding: 14x15px; font-size: 28px; } /*Other menu font items*/ .navbar.navbar-custom .navbar-nav > li > a { color: rgba(241, 210, 210, 1); font-size: 20px; } .navbar.navbar-custom .navbar-brand:hover { color: rgba(255, 255, 255, 1); } .navbar.navbar-custom .navbar-nav>li>a:hover { color: rgba(255, 255, 255, 1); } .navbar.navbar-custom .navbar-toggle { border-color: transparent; } @media (max-width: 767px) { .navbar.navbar-custom .navbar-collapse, .navbar.navbar-custom .navbar-form { border-color: rgb(222, 145, 139); background-color: rgba(155, 155, 255, 1); } } 

 <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" /> <!-- Static navbar --> <nav class="navbar navbar-default navbar-custom navbar-static-top"> <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> <div id="nav-icon4"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </div> </button> <a class="navbar-brand" href="{% url 'home' %}">Brandname</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="{% url 'home' %}">Home</a> </li> <li><a href="{% url 'about' %}">About</a> </li> <li><a href="{% url 'contact' %}">Contact</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a> </li> <li><a href="#">Another action</a> </li> <li><a href="#">Something else here</a> </li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a> </li> </ul> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav>