解决方法

Question

我正在尝试解决一个显而易见的问题，我在Bootstrap 4.1中使用了标准的Bootstrap代码，但是它的行为并不完全像是一个愿望（就像我在文档中看到的那样）

我的目标是重现此内容（一行未折叠） https://getbootstrap.com/docs/4.0/components/navbar/#nav

但是我的导航栏一经折叠便以两行结尾，请参见此处：

在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

但这不是引导文件中的内容 同样，切换开关在默认情况下仍未在右侧对齐

Answer 1

仅供参考，

错误是代码中缺少主要的“ navbar”类，

100％我的错，无可奉告。

Bootstrap 4导航栏始终位于2行

解决方法

1 个答案: