BootStrap导航栏未显示
[英]BootStrap navbar not showing
问题描述
I was working on the tutorial to build a simple website, when I tried running the bootstrap template, it does not seem to show up 
我正在本教程中构建一个简单的网站，当我尝试运行引导程序模板时，它似乎没有显示
The screenshot of the website 网站截图
I've included the bootstrap.js file as well as the jquery, here's my code to take a look at: 我已经包含了bootstrap.js文件和jquery，这是我要看的代码：
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" href="/css/bootstrap.css">
<script src ="jquery-3.2.1.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Kevo's Website</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row">
<h1>Welcome</h1>
<p>This is the welcome page</p>
</div>
</div><!-- /.container -->
</body>
</html>
3 个解决方案
解决方案1
2 2017-07-25 00:06:52
From your screenshot, I would guess that /css/bootstrap.css is returning a 404, or you are using the browser's ability to load HTML from the file system (by double clicking on your index.html file) in which case the reference /css/bootstrap.css is looking for a folder on your root drive with the path /css/bootstrap.css . 从屏幕截图中，我猜想/css/bootstrap.css返回404，或者您正在使用浏览器从文件系统加载HTML的能力（通过双击index.html文件），在这种情况下，引用/css/bootstrap.css在根驱动器上寻找路径为/css/bootstrap.css的文件夹。 If you have the css file int he same folder just drop the /css/ and it should work. 如果您的css文件位于同一文件夹中，只需删除/css/ 。
解决方案2
1 已采纳 2017-07-25 00:08:01
Looks fine to me. 在我看来很好。 As Jason mentioned, I think your local bootstrap file isn't being called correctly. 如Jason所述，我认为您的本地引导文件未正确调用。
.row { margin-top: 50px; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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="#">Kevo's Website</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="services.html">Services</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <div class="container"> <div class="row"> <h1>Welcome</h1> <p>This is the welcome page</p> </div> </div><!-- /.container -->
解决方案3
0 2017-07-25 00:09:47
Looks like your css/boostrap is not linked correctly, if your doing this on your local machine try view source and click the css path if its there. 看起来您的css / boostrap未正确链接，如果您在本地计算机上执行此操作，请尝试view source ，然后单击css路径（如果有）。 and jquery and boostrap.js must be place before the body tags ends. 并且jquery和boostrap.js必须放置在body标签结束之前。
<!DOCTYPE html> <html> <head> <title>Welcome</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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="#">Kevo's Website</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="services.html">Services</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <div class="container"> <div class="row"> <h1>Welcome</h1> <p>This is the welcome page</p> </div> </div><!-- /.container --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.