使用Bootstrap 4的Navbar仅显示汉堡包菜单而不显示链接

时间:2017-12-16 18:48:48

标签: javascript jquery bootstrap-4

我已经安装了bootstrap 4.0.0beta2并试图使用bootstrap的导航栏菜单。我直接从bootstrap的导航栏菜单代码中粘贴了这些内容,只是为了练习。这是我的index.html。导航条用于显示" home" "连结"在普通页面上只应该折叠到较小的屏幕上的汉堡包菜单,但它也在大屏幕上显示汉堡包菜单。我很确定我正确安装了bootstrap,因为像modal这样的其他引导功能工作正常。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
 <link href="https://fonts.googleapis.com/css?family=Risque" rel="stylesheet">
 <link href="css/bootstrap.min.css" rel="stylesheet">
 <title>Wordpress Learning</title>
</head>

<body>
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
            <button class="navbar-toggler navbar-toggler-right" 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>
            <a class="navbar-brand" href="#">Navbar</a>

            <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">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
              </form>
            </div>
          </nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="javascriptfiles/jquery-3.2.1.min.js"></script>
<script src="javascriptfiles/bootstrap.min.js"></script>
<script src="javascriptfiles/bootstrap.bundle.js"></script>
<script src="javascriptfiles/main.js"></script>
</body>
</html>

0 个答案:

没有答案