Question

这里的第一个问题，谢谢你的耐心等待。

我找了一个类似的问题，很惊讶我没有找到一个老实说。

我学到了足够的知识来为此创造一个小提琴。你可以在这里看到它

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中的外部资源选项进入。

非常感谢你的期待。

Answer 1

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

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

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

您已经覆盖了class="collapse show"显示元素的能力，因为您已经创建了样式!important，并且还因为您通过引用选择器中的两个类来匹配引导选择器的特异性

你必须'点击两次'的原因是因为bootstrap添加了另一个类'collapsing'来显示转换，当元素是'collapse show collapsing'时，它是可见的，但只有{{} {1}}，它不是。

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

太过检查你有你的html链接到bootstrap js？

javascript:alert(document.documentElement.outerHTML);

Answer 4

我通过确保拥有相同版本的boostrap.css和bootstrap.js并确保在bootstrap.js之前加载jquery来解决了这个问题

Bootstrap移动菜单不会保持打开状态

4 个答案: