折叠的导航按钮未在 Bootstrap 中展开
Collapsed nav button not expanding in Bootstrap
所以我想在我的 Django 网站的顶部制作一个漂亮的 header，只要有人有一个小 window 或者他们在移动设备上，它就会崩溃。导航菜单折叠起来很好，看起来很棒。但是，无论何时单击折叠菜单按钮（汉堡包图标），当它应该展开菜单时什么也没有发生。我已经确定我实际上指向了正确的东西，即“.navbar-collapse”。我看过其他问题，例如 this，这些问题显示的示例与我所拥有的相同，所以我不确定为什么它对我不起作用。
这是我设置导航栏的地方：
<nav class="navbar navbar-default navbar-fixed-top">
<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=".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="/">My Name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li><a href='/'>Home</a></li>
<li><a href='/blog/'>Blog</a></li>
<li><a href='/projects/'>Projects</a></li>
<li><a href='/resume/'>Resume</a></li>
<li><a href='/contact/'>Contact</a></li>
</ul>
</nav><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
有什么想法吗？
您的代码似乎工作正常，问题很可能出在您的 jquery and/or bootstrap.js CDN 上。插入正确的 CDN。
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<nav class="navbar navbar-default navbar-fixed-top">
<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=".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="/">My Name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li><a href='/'>Home</a></li>
<li><a href='/blog/'>Blog</a></li>
<li><a href='/projects/'>Projects</a></li>
<li><a href='/resume/'>Resume</a></li>
<li><a href='/contact/'>Contact</a></li>
</ul>
</nav><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
对于将通过网络搜索到达此处的其他人：
我遇到了同样的问题 - 无法展开导航栏 - 但我的所有代码都很好。
我的问题是我有一个 network-level 广告拦截器 阻止了我的一些 CDN 脚本。
捂脸
@AVI 的回答帮助我得出了这个结论，检查你的 CDN
所以我想在我的 Django 网站的顶部制作一个漂亮的 header，只要有人有一个小 window 或者他们在移动设备上，它就会崩溃。导航菜单折叠起来很好，看起来很棒。但是，无论何时单击折叠菜单按钮（汉堡包图标），当它应该展开菜单时什么也没有发生。我已经确定我实际上指向了正确的东西，即“.navbar-collapse”。我看过其他问题，例如 this，这些问题显示的示例与我所拥有的相同，所以我不确定为什么它对我不起作用。
这是我设置导航栏的地方：
<nav class="navbar navbar-default navbar-fixed-top">
<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=".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="/">My Name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li><a href='/'>Home</a></li>
<li><a href='/blog/'>Blog</a></li>
<li><a href='/projects/'>Projects</a></li>
<li><a href='/resume/'>Resume</a></li>
<li><a href='/contact/'>Contact</a></li>
</ul>
</nav><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
有什么想法吗？
您的代码似乎工作正常，问题很可能出在您的 jquery and/or bootstrap.js CDN 上。插入正确的 CDN。
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<nav class="navbar navbar-default navbar-fixed-top">
<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=".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="/">My Name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li><a href='/'>Home</a></li>
<li><a href='/blog/'>Blog</a></li>
<li><a href='/projects/'>Projects</a></li>
<li><a href='/resume/'>Resume</a></li>
<li><a href='/contact/'>Contact</a></li>
</ul>
</nav><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
对于将通过网络搜索到达此处的其他人：
我遇到了同样的问题 - 无法展开导航栏 - 但我的所有代码都很好。
我的问题是我有一个 network-level 广告拦截器 阻止了我的一些 CDN 脚本。
捂脸
@AVI 的回答帮助我得出了这个结论，检查你的 CDN