我正在尝试创建一个 Bootstrap css 导航栏，它在顶部显示一个黑色导航栏并且它是移动响应的。相反，切换导航按钮显示并且没有导航栏。为什么会显示切换导航按钮？
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html";
charset="utf- 8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="">
<title>Local Web Hosting</title>
<!--Bootstrap core CSS-->
<link href="assets/css/bootstrap.min.js" rel="stylesheet">
<link rel="stylesheet" href="style_4.css" type="text/css">
<link rel="stylesheet" type="text/css" href="normalize.css">
<!-- Meta Description. For Search Engines. For more about
<meta> tags: w3schools.com/tags/tag_meta.asp-->
<meta name="description" content="A web hosting website.">
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"
> </script>
<!--[endif]-->
</head>
<body>
<!--HEADER
===================================-->
<header class="site-header" role="banner">
<!--NAVBAR
===================================-->
<div class="navbar-wrapper">
<div class="navbar navbar-inverse
navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data- toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">
<img src="images/logo.png" alt="Web Hosting Company"></a>
</div><!--navbar-header-->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="home.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="hosting_plans.html">HOSTING PLANS</a></li>
<li><a href="features.html">FEATURES</a></li>
<li><a href="contact_us.html">CONTACT US</a></li>
</ul><!--nav-->
</div><!--navbar-collapse-->
</div><!--container-->
</div><!--navbar-->
</div><!--navbar-wrapper-->
</header>
最佳答案
看起来您没有访问 Bootstrap 依赖项:请参阅下面的代码段中您的代码的工作示例。
<link rel="stylesheet" type="text/css" href="path/to/bootstrap.css">
<script src="path/to/jquery.js"></script>
<script src="path/to/bootstrap.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<body>
<!--HEADER ===================================-->
<header class="site-header" role="banner">
<!--NAVBAR ===================================-->
<div class="navbar-wrapper">
<div class="navbar navbar-inverse
navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">
<img src="images/logo.png" alt="Web Hosting Company">
</a>
</div>
<!--navbar-header-->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="home.html">HOME</a>
</li>
<li><a href="about.html">ABOUT</a>
</li>
<li><a href="hosting_plans.html">HOSTING PLANS</a>
</li>
<li><a href="features.html">FEATURES</a>
</li>
<li><a href="contact_us.html">CONTACT US</a>
</li>
</ul>
<!--nav-->
</div>
<!--navbar-collapse-->
</div>
<!--container-->
</div>
<!--navbar-->
</div>
<!--navbar-wrapper-->
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>关于html - 为什么显示切换导航按钮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33110113/