Html 引导导航栏无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41576380/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap navbar not working correctly
提问by Zozo
Im using tomcat 9, java, bootstrap to develop a online forum. Suddenly the navigation is not working, i tried a few things but no luck. In the chrome network inspector tab everything seems fine.
我使用tomcat 9、java、bootstrap开发在线论坛。突然导航不起作用，我尝试了几件事但没有运气。在 chrome 网络检查器选项卡中，一切似乎都很好。
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="static/css/myCss.css" rel="stylesheet">
<meta charset="UTF-8">
<link href="static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="static/css/customIndex.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="static/css/bootstrap-responsive.css" rel="stylesheet">
<title>Index</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="./index.jsp">Index</a></li>
<li><a href="./profile.jsp">Profile</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="./LogoutServlet">Logout</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
screenshot: localhost:screenshot
截图： 本地主机：截图
回答by Tony
Perhaps the path to your bootstrap.min.css is collapsed? I just added this link to your header
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">and pointed to the data-target="#bs-example-navbar-collapse-1". It seems working now.
也许你的 bootstrap.min.css 的路径被折叠了？我刚刚将此链接添加到您的标题
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">并指向data-target="#bs-example-navbar-collapse-1". 现在似乎工作。
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="static/css/myCss.css" rel="stylesheet">
<meta charset="UTF-8">
<link href="static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="static/css/customIndex.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="static/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Index</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="./index.jsp">Index</a></li>
<li><a href="./profile.jsp">Profile</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="./LogoutServlet">Logout</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>回答by Nafees Tariq
The navbar is not working because of some problem with bootstrap itself.
由于引导程序本身存在一些问题，导航栏无法正常工作。
Bootstrap's current version at the date of posting this answer is 4.3.x and it seems to be having some problems.
The navbar is not working properly and neither is .page-header(page-header class. And I'm not sure if other stuff is working fine in this version).
在发布此答案之日，Bootstrap 的当前版本是 4.3.x，它似乎存在一些问题。导航栏不能正常工作，也不能正常工作.page-header（页头类。我不确定其他东西在这个版本中是否工作正常）。
Also the CDN for minified bootstrap css <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">that is on bootstrap's website doesn't work correctly either.
此外，引导<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">程序网站上的用于缩小引导程序 css 的 CDN也无法正常工作。
The solution is using older version (version 3.3.5 I know works correctly) of bootstrap which I know is not an efficient solution, but it works.
Or you can use this CDN for minified bootstrap css <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">. It will work fine.
解决方案是使用旧版本的引导程序（我知道版本 3.3.5 工作正常），我知道这不是一个有效的解决方案，但它有效。或者您可以将此 CDN 用于缩小的引导 css <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">。它会正常工作。
