第一个问题，谢谢你的耐心等待。
我寻找了一个类似的问题，很惊讶我没有诚实地找到一个。
我也学到了足够的东西来为此制作小提琴。你可以在这里看到它
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;
}
}
减小输出窗口的大小以强制移动菜单。(而不是水平文本菜单(
问题1：要打开移动菜单，我需要单击两次。这是第一个问题。
问题2：它不会保持打开状态。
在设置小提琴时，我开始相信这是一个 css 问题，因为当所有 css 都被剥离时，它按预期工作。如果我正确设置了小提琴，我的 css 就在 css 窗口中，而股票引导 css 是通过 jsfiddle 中的外部资源选项进入的。
非常感谢您的关注。
这是告诉浏览器将其从视图中删除，您应该将其删除：
.navbar-collapse.collapse {
display: none!important;
}
Bootstrap 在任何data-toggle="collapse"元素上使用class="collapse"和class="collapse show"。
您已经覆盖了class="collapse show"显示元素的功能，因为您已经使样式!important，还因为您还引用了选择器中的两个类来匹配引导选择器的特殊性。
您必须"单击两次"的原因是因为 bootstrap 添加了另一个类'collapsing'来显示过渡，并且当元素'collapse show collapsing'时，它是可见的，但当它只是'collapse collapsing'时，它不是。
看完小提琴手后，通过移除
.navbar-collapse.collapse {
display: none!important;
}
解决了问题。
在 css 中删除上面的代码@media (max-width: 1200px)
我无法复制您的第一期。
更新我不确定你删除了什么。这是更新的代码。
[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;
}
}
也请检查你的HTML链接中有引导JS吗？
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
我通过确保我拥有相同版本的 boostrap.css 和 bootstrap.js 并确保我在bootstrap.js之前加载 jquery 来解决此问题