Bootstrap 导航栏列表项/链接未显示 [英] Bootstrap Navbar list items/links not showing
问题描述
我正在学习使用 Bootstrap 并使用组件,特别是导航栏.
我的链接/列表项未显示.我直接从 Bootstrap 复制了代码.我希望有人能解释一下我遗漏了什么.
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>NavBar</title><!-- 引导 css --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css"integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064z8nqdfhCB"crossorigin="匿名">头部><身体><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="切换导航"><span class="navbar-toggler-icon"></span>按钮><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="#">功能</a><a class="nav-item nav-link" href="#">定价</a><a class="nav-item nav-link disabled" href="#">Disabled</a>
</nav><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA51vPA1"cross
在 Bootstrap 4 中,需要 navbar-expand-*
类来显示水平导航栏,否则它会折叠成移动状态.
确保您在 Codepen 中正确引用它为 https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css
或者,使用 Codeply,它将为您包含所有相关的库:Codeply 上的 Bootstrap 4
这是带有 Bootstrap 4.0.0 的导航栏:http://www.codeply.com/go/SmEyy7rg5S