Html Bootstrap css，如何使导航栏切换始终可见？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28879905/
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 css, how to make always visible navbar-toggle?
提问by sathia
I'd like to add one of those buttons that are shown when on mobile device in order to open the collapsed menu in the navbar, but haven't been able so far, here's the less code and html
我想添加在移动设备上显示的按钮之一，以便在导航栏中打开折叠菜单，但到目前为止还没有，这是较少的代码和 html
.navbar-toggle-always{
.navbar-toggle;
@media (min-width: 768px){
display: block!important;
}
.zero-margins;
}
html
html
<div class="pull-left ">
<button type="button" class="navbar-toggle-always collapsed" data-toggle="collapse" data-target="#left" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
upon further inspection I've noticed that the element is not hidden, it's just transparent, for some reason if I add
经过进一步检查，我注意到该元素没有隐藏，它只是透明的，如果我添加
@media (min-width: 768px){
display: block!important;
background-color:pink;
}
i see it fine, but withouth the icon-bar bars or the borders. I'll keep working on it
我觉得很好，但没有图标栏或边框。我会继续努力
and this is how I would like to show it:
这就是我想展示的方式：
采纳答案by sathia
After some tests I managed to obtain the desired results:
经过一些测试，我设法获得了预期的结果：
here's the less code:
这是较少的代码：
.navbar-inverse {
.navbar-toggle-always {
border-color: @navbar-inverse-toggle-border-color;
&:hover,
&:focus {
background-color: @navbar-inverse-toggle-hover-bg;
}
.icon-bar-always {
background-color: @navbar-inverse-toggle-icon-bar-bg;
}
}
}
.navbar-toggle-always{
.navbar-toggle;
@media (min-width: 768px){
display: block!important;
background-color: transparent;
border:1px solid #333333;
}
.zero-margins;
.icon-bar-always {
.icon-bar;
border:1px solid #fff;
display: block;
border-radius: 1px;
}
.icon-bar-always + .icon-bar-always {
margin-top: 4px;
}
}
make sure you have at least 768px on the bottom right panel to see it:
确保右下面板至少有 768px 才能看到它：
回答by Jo Smo
I'm not sure if you want to add another one or is it enough to change the existing one. I case, you want to change the existing one, on a default/clean bootstrap install, this show do it:
我不确定您是要添加另一个还是更改现有的就足够了。我的情况，你想改变现有的，在默认/干净的引导安装，这个节目做：
.navbar-toggle {
display: block;
}
.navbar-collapse.collapse {
display: none !important;
}
回答by Jacob Raccuia
In a normal bootstrap install, there is this line of css found in their generic css file:
在正常的引导程序安装中，在其通用 css 文件中可以找到这一行 css：
.navbar-toggle { display:none; }
In order to get the button to always show, in your custom CSS you just need to add this line of code. If you have your stylesheet applied after theirs, it will overwrite it.
为了让按钮始终显示，在您的自定义 CSS 中，您只需要添加这行代码。如果您在他们之后应用了样式表，它将覆盖它。
.navbar-toggle { display:block; } // the !important isn't necessary
回答by AndrewL64
The colors of the toggle and icon-bar are defined along with navbar-default as well as with navbar-inverse. So if you are trying to display them on a custom div, the colors are also removed along with the navbar-default/inverse color scheme.
切换和图标栏的颜色与 navbar-default 和 navbar-inverse 一起定义。因此，如果您尝试在自定义 div 上显示它们，颜色也会与导航栏默认/反向配色方案一起删除。
Add this to your css:
将此添加到您的CSS：
.navbar-toggle {
background-color: transparent;
}
.icon-bar {
background-color:#333;
}
回答by Alexandros
Why not just add d-blockclass to toggler?
为什么不直接将d-block类添加到切换器？
<button class="navbar-toggler d-block" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
回答by dlimos
Add a custom class to your navbar-toggle, like navbar-toggle-visible and then add this rule to your css
将自定义类添加到您的导航栏切换，例如 navbar-toggle-visible，然后将此规则添加到您的 css
@media (min-width: 768px) {
.navbar-toggle-visible {
display: inline;
}
