小屏幕和大屏幕的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>