小屏幕和大屏幕的Bootstrap NavBar不透明度

Question

我希望我的Navbar顶栏的不透明度为0.75，但Navbar下拉菜单（出现在小屏幕上）具有不透明度1.0;我的当前代码很好用（使用rgba colornotation来规避父窗口 - 工具栏 - 子窗口之间的继承问题 - 下拉菜单 - 将不透明度设置为单独的值时）在小屏幕上显示[黄色'不透明';紫色是“不透明”]：

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

刚出和右下角都没有不透明，顶栏的mainpart是不透明的;而我希望整个顶栏不是不透明的（并且显然是相同的颜色）。

我明白什么时候下拉菜单折叠到顶栏，它需要它的不透明特性，但这不是我想要的。

这里是一个小提琴，显示更改屏幕宽度时的行为： 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核心不会被直接覆盖。

.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>