twitter-bootstrap 切换按钮折叠在引导程序中的引导程序导航栏中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30885582/
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
Toggle button collapse not working in Bootstrap navbar in bootstrap
提问by Amir Amiri
Here is my navbar created by bootstrap Why the button doesn't work in small sizes?
这是由 bootstrap 创建的我的导航栏 为什么按钮在小尺寸下不起作用？
I've compared my navbar with bootstrap several times. why it doesn't work?
我已经多次将我的导航栏与引导程序进行了比较。为什么它不起作用？
<div class="navbar-wrapper">
<div class="container container-class>
<nav class=" navbar navbar-fixed-top ">
<div class="navbar-inner ">
<div class="header-customer-support-nayan07 ">
<h4>Telephone</h4>
<p>982144556633+</p>
</div>
<div class="collapse navbar-collapse ">
<ul class="nav navbar-nav ">
<li class="active "><a href="# ">Home</a></li>
<li class="dropdown ">
<a href="# ">Pages
<span class="caret "></span></a>
<ul class="dropdown-menu ">
<li><a href="# ">Page 1-1</a></li>
<li><a href="# ">Page 1-2</a></li>
<li><a href="# ">Page 1-3</a></li>
</ul>
</li>
<li><a href="# ">Products</a></li>
<li><a href="# ">Blog</a></li>
<li><a href="# ">Contacts</a></li>
</ul>
</div>
<button class="navbar-toggle " aria-controls="navbar " aria-expanded="true " data-target=".nav-collapse " data-toggle="collapse " type="button ">
<span class="sr-only ">Toggle navigation</span>
<span class="icon-bar "></span>
<span class="icon-bar "></span>
<span class="icon-bar "></span>
</button>
</div>
回答by Alex Coloma
Change :
改变 ：
<a href="#">Pages<span class="caret"></span></a>
with:
和：
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Pages <span class="caret"></span></a>
EDITED
已编辑
There was some issues with your html:
您的 html 存在一些问题：
Found unclosed class: <div class="container container-class>
找到未关闭的类： <div class="container container-class>
data-target=".nav-collapse"
have to be
不得不
data-target=".navbar-collapse"
data-target=".navbar-collapse"
Now it works:
现在它的工作原理：
<div class="navbar-wrapper">
<div class="container container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-inner">
<div class="header-customer-support-nayan07">
<button class="navbar-toggle" aria-controls="navbar" aria-expanded="true" data-target=".navbar-collapse" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h4>Telephone</h4>
<p>982144556633+</p>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Products</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
</div>
</nav>
<div class="header-logo"></div>
</div>
