为什么这个引导导航不起作用？答案

【问题标题】：Why is this bootstrap navigation not working?为什么这个引导导航不起作用？
【发布时间】：2017-11-02 05:14:01
【问题描述】：

我正在使用 Bootstrap 建议的确切代码：-

<nav class="navbar navbar-default navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" data-target="#navbarCollapse5" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Brand</a>
        </div>
        <div id="navbarCollapse5" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Profile</a></li>
                <li><a href="#">Messages</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Login</a></li>
            </ul>
        </div>
    </div>
</nav>

这里是JSFiddle。

请注意，我在JSFiddle 中确实使用了 Bootstrap CSS 和 JS 作为外部资源。

【问题讨论】：

什么不起作用？
@sumitchauhan 请运行 JSFiddle 并查看结果，导航未按预期显示。
您是否阅读过引导文档？
是的，我做到了，然后我在这里遇到了一个关于使用 Bootstrap 创建响应式导航的教程 - tutorialrepublic.com/twitter-bootstrap-tutorial/… 但是当我使用确切的代码创建 JSfiddle 时，它不起作用。
@lk_wp 你使用的是 bootstrap 4 而不是 3

标签： javascript jquery css twitter-bootstrap navigation

【解决方案1】：

您需要在当前版本的引导程序中使用v4 markup 或使用v3 for your current markup

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

【讨论】：

【解决方案2】：

现在试试它对我有用你正在使用 Bootstrap v4.0.0-beta.2 尝试使用 3.3.7

    .bs-example{
    	margin: 20px;
    }

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Bootstrap 3 Static Navbar</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head> 
<body>
<div class="bs-example">
    <nav class="navbar navbar-default">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Brand</a>
        </div>
        <!-- Collection of nav links and other content for toggling -->
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Profile</a></li>
                <li><a href="#">Messages</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Login</a></li>
            </ul>
        </div>
    </nav>
</div>
</body>
</html>

【讨论】：

他使用的是 bootstrap 4 而不是 3