我希望我的Navbar顶栏有不透明度0.75,但Navbar下拉菜单(显示在小屏幕上)有不透明度1.0;我当前的代码工作得很好(在小屏幕上使用rgba颜色来规避父-Toolbar-en children -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);
}
答案 0 :(得分:2)
只需将.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>