css - Bootstrap 4 导航栏不工作

<分区>

我是 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>

最佳答案

Bootstrap V4 Beta 导航栏与 Bootstrap V4 Alpha 导航栏不同。

这是从 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>

关于css - Bootstrap 4 导航栏不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46672365/

上一篇：带渐变的 CSS 三 Angular 形

下一篇：css - 当 css position sticky 停止粘附时

相关文章：

java - 如何将菜单集成到布局 (Java GUI) 中？

html - 如何使用 CSS 调整 svg 的大小？

css - 将一个 Div 放置在另一个 DIV 下方

html - 调整窗口大小并将 div 保持在同一个位置

css - ROR Bootstrap 单选按钮对齐

html - 如何使用 Twitter Bootstrap 3.0 创建类似 Gmail 的布局

javascript - 转换div时如何阻止 sibling 移动？

css - 我想让我的搜索栏像图像一样弹出窗口吗？

java - Android java 2.3.3，如何创建类似steam的菜单？

javascript - Javascript 上下文菜单？