我已经安装了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>