twitter-bootstrap Boostrap 4 导航栏不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46672365/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Boostrap 4 Navbar does not work
提问by Bernie K.
I'm new to Bootstrap. I installed Bootstrap 4 and took the Navbar code directly from Bootstrap 4 Navbar example code, but the code does not show the navigation - it only shows the menu icon. Could someone tell me what I'm doing wrong here please?
我是 Bootstrap 的新手。我安装了 Bootstrap 4 并直接从 Bootstrap 4 Navbar 示例代码中获取了 Navbar 代码，但该代码不显示导航 - 它只显示菜单图标。有人能告诉我我在这里做错了什么吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.css">
<link rel="stylesheet" type="text/css" href="js/bootstrap.js">
</head>
<body>
<div class="container">
<nav class="navbar navbar-toggleable-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>
</div>
</body>
</html>
回答by TidyDev
The Bootstrap V4 Beta navbar is different to the Bootstrap V4 Alpha navbar.
Bootstrap V4 Beta 导航栏与 Bootstrap V4 Alpha 导航栏不同。
Here's an example Bootstrap v4 Beta navbar taken from https://getbootstrap.com/docs/4.0/components/navbar/
这是从https://getbootstrap.com/docs/4.0/components/navbar/获取的示例 Bootstrap v4 Beta 导航栏
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
回答by Brock Marek
Not sure which version of bootstrap you are using. However you are missing Jquery CDN which will definitely break bootstrap.
不确定您使用的是哪个版本的引导程序。但是，您缺少 Jquery CDN，它肯定会破坏引导程序。
Get rid of the Bootstrap JS at the start of your html doc and add this at the end. (jquery must be referenced before bootstrap JS.)
去掉 html 文档开头的 Bootstrap JS 并在末尾添加它。（jquery 必须在 bootstrap JS 之前引用。）
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
回答by Eric Pinheiro
You are using the navbar of an old bootstrap version. You need to get the template of bootstrap 4. Follow the link:
您正在使用旧引导程序版本的导航栏。需要获取bootstrap 4的模板，点击链接：
