Bootstrap移动菜单不会保持打开状态 [英] Bootstrap mobile menu wont stay open
问题描述
第一个问题，谢谢您的耐心配合.
First question here, thank you for your patience.
我正在寻找一个类似的问题，但很惊讶地发现我没有诚实地找到一个问题.
I looked for a similar question and was surprised I didn't find one honestly.
我学到了足够的知识来为此创建小提琴.您可以在这里看到它
I learned enough to create a fiddle for this as well. You can see it here
https://jsfiddle.net/jhallwebdev/gm6r6mLu/5/
HTML
<body>
<div class="container-fluid">
<div class="row yellow container-fluid"> <!-- YELLOW NAV ROW -->
<div class="col-lg-1 col-md-2 col-sm-2 col-xs-2">
<div>
<img src="logo.jpeg" alt="logo" title="logo" width="100px" height="100px" class="my-image">
</div>
</div>
<div class="col-lg-5 col-md-7 col-sm-7 col-xs-7">
<div class="jer-margin-left">
<div class="header-title">My Bootstrap Site</div>
<div class="header-slogan">And its navbar problem...</div>
</div>
</div>
<div class="col-lg-6 col-md-3 col-sm-3 col-xs-3">
<div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav jer-nav">
<li class="jer-active"><a href="#">HOME <span class="sr-only">(current)</span></a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">FORMS</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</div>
</div> <!-- END YELLOW NAV ROW -->
</div> <!-- END CONTAINER -->
CSS
[hidden] {
display: none;
}
* {
box-sizing: border-box;
}
.yellow {
background-color: rgb(253, 232, 104);
width: 100%;
}
.my-image {
margin: 10px;
}
.jer-margin-left {
margin-left: 15px;
}
.header-title {
color: #000;
font-family: Merriweather;
font-style: italic;
font-size: 30px;
margin: 20px 0 0 0;
}
.header-slogan {
color: #000;
font-family: Merriweather;
font-style: italic;
font-size: 22px;
}
.no-left-margin {
margin-left: -70px;
}
.navbar-default {
background-color: rgb(253, 232, 104);
border-color: rgb(253, 232, 104);
padding-top: 20px;
}
.jer-nav {
padding-top: 10px;
padding-bottom: 10px;
color: #000;
text-align: center;
font-family: Montserrat;
font-size: 16px;
text-transform: uppercase;
float: right;
}
.navbar-default .navbar-nav>li>a {
color: #000;
}
.navbar-default .navbar-nav>li>a:hover {
color: white;
}
.container-fluid {
padding-right: 0;
padding-left: 0;
margin: 0;
}
.jer-active {
border: silver solid 1px;
background-color: rgb(253, 232, 104);
}
@media (max-width: 420px) {
.jer-margin-left {
margin-left: 65px;
}
}
@media (max-width: 600px) {
.header-title {
font-size: 22px;
}
.header-slogan {
font-size: 15px;
}
.jer-margin-left {
margin-left: 45px;
}
}
@media (max-width: 1200px) {
.ph-float-right {
float: none;
margin-right: 0;
}
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
}
减小输出窗口的大小以强制移动菜单. (而不是水平文本菜单)
Reduce the size of the output window to force the mobile menu. (instead of the horizontal text menu)
问题1:要打开移动菜单，我需要单击两次.那是第一个问题.
ISSUE 1: To open the mobile menu I am required to click on it twice. That is the first issue.
问题2:它不会保持打开状态.
ISSUE 2: It will not stay open.
在设置小提琴时，我开始相信这是一个CSS问题，因为当所有CSS都被剥离时，它会按预期运行.如果我正确设置了小提琴，则我的css在css窗口中，并且股票引导css通过jsfiddle中的外部资源选项进入.
In setting up the fiddle I came to believe that its a css issue as when all of the css was stripped away it works as hoped. If I setup the fiddle properly, MY css is in the css window, and the stock bootstrap css is coming in through the external resources options in jsfiddle.
非常感谢您的关注.
推荐答案
这是告诉浏览器将其从视图中删除，您应该将其删除:
This is telling the browser to remove it from view, you should remove it:
.navbar-collapse.collapse {
display: none!important;
}
Bootstrap在任何data-toggle="collapse"元素上使用class="collapse"和class="collapse show".
Bootstrap uses class="collapse" and class="collapse show" on any data-toggle="collapse" element.
您已经覆盖了class="collapse show"显示元素的功能，这是因为您已将样式设置为!important，并且还因为您还通过引用选择器中的两个类来匹配了引导程序选择器的特殊性.
You have overridden the ability for class="collapse show" to display the element because you have made your style !important and also because you have matched the specificity of the bootstrap selectors by also referring to two classes in your selector.
您必须单击两次"的原因是，引导程序添加了另一个类'collapsing'来显示过渡，并且当元素为'collapse show collapsing'时，它是可见的，但是当元素仅为'collapse collapsing'时，它是可见的不是.
The reason why you had to 'click twice' is because bootstrap adds another class 'collapsing' to show the transition, and when the element is 'collapse show collapsing', it is visible, but when it is only 'collapse collapsing', it is not.
这篇关于Bootstrap移动菜单不会保持打开状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
