Question

我正在学习使用Bootstrap并使用组件，特别是导航栏。我的链接/列表项没有显示，直接从Bootstrap复制。希望有人可以向我解释我缺少的东西。

ChatMessage

http://codepen.io/hellojessicagraham/pen/yMgXjo

提前谢谢

Answer 1

在 Bootstrap 4 中，需要navbar-expand-*类才能显示水平导航栏，否则会崩溃到其移动状态。

确保您已在Codepen中正确引用https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

或，使用Codeply，它将包含所有相关的库： Bootstrap 4 on Codeply

这是使用 Bootstrap 4.0.0 的Navbar： http://www.codeply.com/go/SmEyy7rg5S

<nav class="navbar navbar-expand-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" 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>
    <a class="navbar-brand" href="#">Navbar</a>
    <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="#">Features</a>
            <a class="nav-item nav-link" href="#">Pricing</a>
            <a class="nav-item nav-link disabled" href="#">Disabled</a>
        </div>
    </div>
</nav>

相关：Disable responsive navbar in bootstrap 4

Answer 2

您对其css文件的引用不是其网站上列出的内容。使用以下内容：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

您的java脚本文件也不是列出的内容：

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

在这里您可以找到最新CDN的最新链接：http://getbootstrap.com/getting-started/

你可能已经从实验场所复制过了。（它在文件名中表示alpha，因此可能存在一些错误）

Answer 3

看起来你正在使用alpha版本的bootstrap。此版本可能包含错误。您可能想要使用最新的稳定版本。 This answer具有指向版本3.3.7的正确css和js文件的链接。如果在此答案之后更新了引导程序，则可以在http://getbootstrap.com/getting-started/下载最新版本。希望这有帮助！

阿尔伯特

Bootstrap Navbar列表项/链接未显示

3 个答案: