twitter-bootstrap 窗口缩小时引导折叠栏变为透明
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18558881/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap collapse bar turns transparent when window is reduced
提问by bobbyjones
im having issues with my bootstrap responsive background.
我的引导程序响应背景有问题。
as seen below, when my window is reduced to simulate a mobile screen size, my dropdown becomes transparent.
如下所示，当我的窗口缩小以模拟移动屏幕大小时，我的下拉菜单变得透明。
this is my code, which was copied from the bootstrap sample websites, the only change i made was the links.
这是我的代码，它是从引导示例网站复制的，我所做的唯一更改是链接。
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Dashboard</a></li>
<li><a href="#pages">Pages</a></li>
<li><a href="#extensions">Extensions</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></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 class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<div class="navbar-right">
<p style="color:#fff;">some text</p>
</div>
</div><!--/.navbar-collapse -->
</div>
</div>
[EDIT] i have this in my header
[编辑] 我的标题中有这个
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
回答by agastalver
This happens when you lock the navbar's height. Check css and change:
当您锁定导航栏的高度时会发生这种情况。检查 css 并更改：
height: 50px;
into this:
进入这个：
min-height: 50px;
Good luck.
祝你好运。
回答by Cesar Gomez Paez
I had the same problem, i resolved the problem by adding a css property position: relative;in the nav div :
我遇到了同样的问题，我通过position: relative;在导航 div 中添加一个 css 属性解决了这个问题：
<div class="navbar navbar-fixed-top>
became in:
变成了：
<div class="navbar navbar-fixed-top" style="position: relative;">
回答by Andrux51
Just ran into this. Adding a background style to the .navbar-collapseelement...
刚碰到这个。为.navbar-collapse元素添加背景样式...
<div class="navbar-collapse collapse">
Becomes
成为
<div class="collapse navbar-collapse" style="background:black">
This seemed to fix the problem for me, hope it helps you!
这似乎为我解决了问题，希望对您有所帮助！
回答by Norex
I had the same problem and I solved it using the next line in my style.css
我遇到了同样的问题，我使用 style.css 中的下一行解决了它
.navbar-collapse{
background-color: white;
}
I hope this work in your project.
我希望这能在你的项目中发挥作用。
回答by Eray T
I was able to solve the issue this way:
我能够通过这种方式解决这个问题：
.navbar {
min-height: 85px;
height: auto !important;
}
回答by A H Bensiali
Had the same problem
有同样的问题
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="color: black">
<span class="sr-only ">{% trans "Toggle Navigation" %}</span>
<span class="icon-bar grey_dark_l_bg"></span>
<span class="icon-bar grey_dark_l_bg"></span>
<span class="icon-bar grey_dark_l_bg"></span>
</button>
You may be missing the background color of the .icon-bar. I had set the background of the navbar to white so that was my issue.
您可能缺少 .icon-bar 的背景颜色。我已将导航栏的背景设置为白色，所以这是我的问题。
Happy coding
快乐编码
回答by jimiayler
None of the solutions above worked for me. But when I gave my navbara significantly higher z-index like z-index: 9999;, the transparency disappeared.
上述解决方案都不适合我。但是当我给我navbar一个明显更高的 z-index 时z-index: 9999;，透明度就消失了。
回答by lilikandrian
you must add background in navbar li a, this sample css code :
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
background-color: #08A2FA;
line-height: 1.42857143 !important; /* this for line in desktop mode */
}
您必须在导航栏中添加背景，此示例 css 代码：
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
background-color: #08A2FA;
line-height: 1.42857143 !important; /* this for line in desktop mode */
}
