时间戳

首页 > 解决方案 > Bootstrap 4 导航栏总是在 2 行

bootstrap-4 - Bootstrap 4 导航栏总是在 2 行

问题描述

我正在尝试解决一个似乎很明显的问题，我使用了标准的 Bootstrap 代码和 Bootstrap 4.1，但它的行为并不完全像一个想要的（就像我在文档中看到的那样）

我的目标是重现这一点（未折叠在一行上） https://getbootstrap.com/docs/4.0/components/navbar/#nav 在此处输入图像描述

但是我的导航栏在展开后立即显示为 2 行，请参见此处：

在此处输入图像描述 在 jsfiddle 上看到它 https://jsfiddle.net/acourdavault/3jnfgk5z/1/#&togetherjs=D7vbBSPwLI

代码在这里：

    <html>

<head>
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
        crossorigin="anonymous">
</head>

<body>
    <header>
        <!-- Image and text -->
        <nav class="navbar-expand-lg navbar-light bg-light sticky-top">
            <a class="navbar-brand" href="#">
                Brand
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup"
                aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <div class="navbar-nav">
                    <a class="nav-item nav-link active" href="#">Home
                        <span class="sr-only">(current)</span>
                    </a>
                    <a class="nav-item nav-link" href="#">Notifications</a>
                    <a class="nav-item nav-link" href="#">Settings</a>
                    <a class="nav-item nav-link" href="#">Help</a>
                </div>
            </div>
        </nav>
    </header>
    <div id="container">
    </div>
    <footer></footer>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
        crossorigin="anonymous"></script>
</body>

</html>

解决方法

如果不是拥有，我可以让它工作

nav: - nav-brand - toggler - navbar-collapse: - navbar-nav

我愿意

nav: - toggler - navbar-collapse: - nav-brand - navbar-nav

但这不是引导带中的文档所说 的而且切换器仍然没有在默认情况下正确对齐

标签： bootstrap-4navbar

解决方案

供参考，

错误是它缺少标签中的主要“导航栏”类，

100% 是我的错，不予置评。

推荐阅读