问题
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)
ISSUE 1: To open the mobile menu I am required to click on it twice. That is the first issue.
ISSUE 2: It will not stay open.
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.
Thank you very much for looking.
回答1:
This is telling the browser to remove it from view, you should remove it:
.navbar-collapse.collapse {
display: none!important;
}
Bootstrap uses class="collapse" and class="collapse show" on any data-toggle="collapse" element.
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.
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.
回答2:
After looking at the fiddler, by removing
.navbar-collapse.collapse {
display: none!important;
}
Resolves the issue.
In the css remove the above code at @media (max-width: 1200px)
I am not able to reproduce ur 1st issue.
UPDATE I'm not sure what you removed. Here is the updated code.
[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-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
}
回答3:
just too check do you have in your html link to bootstrap js?
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
回答4:
I fixed this by ensuring I had the same versions of boostrap.css and bootstrap.js and also ensuring that I loaded jquery before bootstrap.js
来源：https://stackoverflow.com/questions/43989745/bootstrap-mobile-menu-wont-stay-open