为什么我折叠的导航栏只有一行而不是三行？

Question

我刚刚开始学习课程bootstrap。我注意到我在自学课程中开发的页面有一个奇怪的怪癖。当我减小浏览器大小以便我的导航栏折叠时 - 它只显示一条水平线，而不是典型的三条水平线。在功能上 - 一切正常 - 但我无法弄清楚为什么会这样，这让我发疯。我正在使用 Bootstrap v3.3.7.

导航栏折叠时的当前外观示例：

但我真正想要的是我在其他地方看到的 "three line" 外观：

这是我 index.html 中的导航定义：

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="collapsed navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar" />
                <span class="icon-bar" />
                <span class="icon-bar" />
            </button>
            <a class="navbar-brand em-text" href="index.html">Gamma</a>
        </div>
        <div class="collapse navbar-collapse" id="navbar">
            <ul class="nav navbar-nav">
                <li class="active"><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>
        <!--/.nav-collapse -->
    </div>
</nav>

这是我的 style.css:

body {
    padding-top: 50px;
}

.em-text {
    color: #1caa98 !important;
}

.col-md-4 {
    margin-bottom: 20px;
}

section {
    padding: 40px 0 40px 0;
}

.jumbotron {
    background: #1b222a url(../img/site_showcase_bg.jpg) no-repeat top center;
    color: #fff;
    height: 575px;
    overflow: none;
}

    .jumbotron h1 {
        margin-top: 60px;
    }

    .jumbotron p {
        margin-bottom: 40px;
    }

    .jumbotron .app-btn {
        width: 40%;
        margin-right: 30px;
    }

    .jumbotron .showcase-img {
        width: 75%;
    }

.demo {
    width: 100%;
    padding: 3px;
    border: 1px solid #ccc;
}

section#feature {
    background-color: #1caa98;
    color: #ffffff;
    padding: 40px;
    overflow: auto;
}

    section#feature ul li {
        font-size: 22px;
        list-style: none;
        line-height: 2.0em;
    }

    section#feature ul {
        padding: 0;
        margin: 0;
    }

section#title-bar {
    padding: 0;
    margin: 0;
    height: 80px;
    background: #1caa98;
}

    section#title-bar h1 {
        color: #fff;
    }

footer {
    background: #333;
    color: #fff;
    padding: 30px 0 20px 0;
}

    footer a {
        color: #fff;
    }

    footer li {
        float: left;
        padding: 0 10px 0 10px;
        list-style: none;
    }

    footer p {
        float: right;
    }

/* MEDIA QUERIES*/

/*Smaller laptop screen or tablet*/
@media(max-width: 1200px) {
}

/* Anything under 991, we're getting rid of phone image*/
@media(max-width: 991px) {
    .showcase-img {
        display: none;
    }
}

@media(min-width: 768px) and (max-width: 990px) {

    .jumbotron .app-btn {
        width: 30%;
    }

    .jumbotron {
        height: 400px !important;
        background-size: 100% 100%;
    }

        .jumbotron h1 {
            margin-top: 10px;
        }
}

@media(max-width: 768px) {

    .jumbotron {
        height: 350px !important;
        background-size: 100% 100%;
    }

        .jumbotron h1 {
            margin-top: 10px;
        }

    section#title-bar h1 {
        padding-left: 5px;
    }
}

/*Maybe for phones*/
@media(max-width: 500px) {

    .jumbotron {
        height: 450px !important;
        background-image: none !important;
        text-align: center;
    }

        .jumbotron img.app-btn {
            width: 60%;
            margin: 0 auto 30px auto;
            display: block;
        }

    section#feature ul li {
        font-size: 19px !important;
    }

    footer p {
        float: none;
        text-align: center;
        padding-top: 20px;
    }
}

Answer 1

因为您正试图以 self-closing 的方式使用 <span> 标签，您不能这样做。

您的浏览器试图修复您的错误，但错误地将您的 <span> 元素相互放置 - 这导致了问题。

修改您的标记，使 <span> 标签正确关闭：

<button type="button" class="collapsed navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

为什么我折叠的导航栏只有一行而不是三行？

Why does my collapsed navbar have a single line instead of three?

navbar

twitter-bootstrap

twitter-bootstrap-3