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

Question

我希望我的导航栏顶部栏的不透明度为 0.75，但导航栏下拉菜单（出现在小屏幕上）的不透明度为 1.0；我当前的代码在小屏幕上效果很好（使用 rgba colornotation 来规避父级 -Toolbar- 子级 -Dropdownmenu- 将不透明度设置为单独值时的继承问题）[黄色是“不透明”；紫色是'不透明']：

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

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

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

这是一个小提琴，它显示了更改屏幕宽度时的行为： 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>