Bootstrap 3固定顶部导航栏
[英]Bootstrap 3 Fixed Top Navigation Bar
问题描述
I am trying to use Bootstrap 3 fixed top navigation bar. 
我正在尝试使用Bootstrap 3固定顶部导航栏。 But when I decrease the browser screen size and click the button its not showing any links 但是，当我减小浏览器屏幕尺寸并单击按钮时，它不显示任何链接
Here is the code 这是代码
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">
</head>
<body>
<!-- Creating a Fixed (top) Navigation Bar with Dropdown -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Exclusive</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Products</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="bootstrap/js/jquery-1.11.3.js"></script>
</body>
</html>
But on resizing and clicking the toggle button it doesn't display links 但是在调整大小并单击切换按钮时，它不会显示链接
I have included jquery files that are required. 我已包含所需的jquery文件。
3 个解决方案
解决方案1
1 2015-08-27 05:42:54
You will get script error $ is undefined because the way you are loading scripts which is as below is wrong. 您将得到script错误$ is undefined因为如下所示的脚本加载方式是错误的。
<script src="bootstrap/js/bootstrap.min.js"></script><!--Either keep this-->
<script src="bootstrap/js/bootstrap.js"></script> <!--or this-->
<script src="bootstrap/js/jquery-1.11.3.js"></script><!--should come first-->
Before loading any .js files you need to load jquery-*.js 在加载任何.js文件之前，您需要加载jquery-*.js
So ultimately you need 所以最终您需要
<script src="bootstrap/js/jquery-1.11.3.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
So you can either use bootstrap.js or bootstrap.min.js but not both. 因此，您可以使用bootstrap.js或bootstrap.min.js但不能同时使用两者。 That will create conflict! 那会造成冲突！
解决方案2
0 2015-08-27 06:38:26
it's not the Error . 不是 Error 。 Its Bootstrap 3 Responsive Page Feature . 其Bootstrap 3响应页面功能 。 When You Open your page in Small Screen or On Mobile Phones then it will Automatically Adjust your Template Page View . 当您在小屏幕或手机上打开页面时，它将自动调整模板页面视图 。
When you Click your Right Icon then You can see your Links there.. 当您单击 右侧图标时，您可以在此处看到您的链接 。
I think this is the solution Which you Want: 我认为这是您想要的解决方案：
if you Want appeared Links when you Open your page on small Devices . 如果您希望在小型设备上打开页面时出现“链接” 。 then you must need to change class-name in your HTML Page . 那么您必须在HTML Page中更改class-name 。
instead of " navbar-Collapse " and " Collapse " use " navbar-Expand " and " Expand " 代替“ navbar-Collapse ”和“ Collapse ”，使用“ navbar-Expand ”和“ Expand ”
Note: please include your js file in a Priority Sequence. 注意：请在优先顺序中包含您的js文件。 it will help you in future development. 它将对您的未来发展有所帮助。
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
my HTML code is here: 我的HTML代码在这里：
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap-theme.css"> </head> <body> <!-- Creating a Fixed (top) Navigation Bar with Dropdown --> <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle " data-toggle="Expand" data-target=".navbar-Expand"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">Exclusive</a> </div> <div class="navbar-Expand Expand"> <ul class="nav navbar-nav"> <li><a href="#" class="text-center">Products</a></li> <li><a href="#" class="text-center">Blog</a></li> <li><a href="#" class="text-center">About</a></li> <li><a href="#" class="text-center">Contact Us</a></li> </ul> </div> </div> </div> <script src="js/jquery-2.1.1.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
see the output image: 看到输出图像：
解决方案3
0 2015-08-27 06:50:02
You have a mistake on your code. 您的代码有误。
first jQuery.js.
第一个jQuery.js。 and, next bootstrap.js 还有下一个bootstrap.js change
<div class="navbar" ...></div>to<nav class="navbar" ...></nav>将<div class="navbar" ...></div>更改为<nav class="navbar" ...></nav>
[Result] https://jsfiddle.net/u2v1nLpb/3/ [结果] https://jsfiddle.net/u2v1nLpb/3/
<body>
<!-- Creating a Fixed (top) Navigation Bar with Dropdown -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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 href="#" class="navbar-brand">Exclusive</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Products</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</nav>
<script src="bootstrap/js/jquery-1.11.3.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.