Bootstrap 移动菜单无法保持打开状态

Question

这里是第一个问题，感谢您的耐心等待。

我寻找了一个类似的问题，但很惊讶我没有找到一个诚实的问题。

我学到了足够多的东西，也可以为此创建一个 fiddle。你可以在这里看到它

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;
    }
}

减小输出大小 window 以强制移动菜单。（而不是水平文本菜单）

问题 1：要打开移动菜单，我需要点击它两次。这是第一个问题。

问题 2：它不会保持打开状态。

在设置 fiddle 时，我开始相信这是一个 css 问题，因为当所有 css 被剥离时，它会按预期工作。如果我正确设置 fiddle，我的 css 在 css window 中，股票 bootstrap css 通过外部输入jsfiddle 中的资源选项。

非常感谢您的观看。

Answer 1

只是为了检查你有在你的htmllink到bootstrap是吗？

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 2

查看提琴手后，通过删除

    .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;
    }
}

Answer 3

这是告诉浏览器将其从视图中删除，您应该将其删除：

.navbar-collapse.collapse {
    display: none!important;
}

Bootstrap 在任何 data-toggle="collapse" 元素上使用 class="collapse" 和 class="collapse show"。

您已经覆盖了 class="collapse show" 显示该元素的能力，因为您已经制作了您的样式 !important 并且还因为您通过引用匹配了 bootstrap 选择器的特异性到您的选择器中的两个 class。

之所以要'click twice'是因为bootstrap添加了另一个class'collapsing'来显示过渡，当元素是'collapse show collapsing' , 是可见的, 但只有 'collapse collapsing' 时, 是不可见的.

Answer 4

我通过确保我拥有相同版本的 boostrap.css 和 bootstrap.js 并确保我在 bootstrap.js

之前加载 jquery 来解决这个问题

Bootstrap 移动菜单无法保持打开状态

Bootstrap mobile menu wont stay open

css

mobile

navbar

twitter-bootstrap