我的导航栏中有一个折叠按钮,但它不起作用。此示例有两个导航栏,但我只需要折叠一个导航栏。
我已经尝试过不同的方法,但我无法解决问题。
问题是当浏览器最小化时按钮不会出现。
以下是代码Link
<div id="navigation" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#teste"><i class="icon-reorder"></i>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="teste">
<ul class="main-nav">
<li class="active">
<a href="index.html">
<span>Dashboard</span>
</a>
</li>
<li>
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
<span>Forms</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="forms-basic.html">Basic forms</a>
</li>
<li>
<a href="forms-extended.html">Extended forms</a>
</li>
<li>
<a href="forms-validation.html">Validation</a>
</li>
<li>
<a href="forms-wizard.html">Wizard</a>
</li>
</ul>
</li>
<li>
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
<span>Components</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="components-timeline.html">Timeline</a>
</li>
<li>
<a href="components-pagestatistics.html">Page statistics</a>
</li>
<li>
<a href="components-sidebarwidgets.html">Sidebar widgets</a>
</li>
<li>
<a href="components-messages.html">Messages & Chat</a>
</li>
<li>
<a href="components-gallery.html">Gallery & Thumbs</a>
</li>
<li>
<a href="components-tiles.html">Tiles</a>
</li>
<li>
<a href="components-icons.html">Icons & Buttons</a>
</li>
<li>
<a href="components-elements.html">UI elements</a>
</li>
<li>
<a href="components-typography.html">Typography</a>
</li>
<li>
<a href="components-bootstrap.html">Bootstrap elements</a>
</li>
<li>
<a href="components-grid.html">Grid</a>
</li>
</ul>
</li>
<li>
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
<span>Tables</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="tables-basic.html">Basic tables</a>
</li>
<li>
<a href="tables-dynamic.html">Dynamic tables</a>
</li>
<li>
<a href="tables-large.html">Large tables</a>
</li>
</ul>
</li>
<li>
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
<span>Plugins</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="plugins-charts.html">Charts</a>
</li>
<li>
<a href="plugins-calendar.html">Calendar</a>
</li>
<li>
<a href="plugins-filemanager.html">File manager</a>
</li>
<li>
<a href="plugins-filetrees.html">File trees</a>
</li>
<li>
<a href="plugins-elements.html">Editable elements</a>
</li>
<li>
<a href="plugins-maps.html">Maps</a>
</li>
<li>
<a href="plugins-dragdrop.html">Drag & Drop widgets</a>
</li>
</ul>
</li>
<li>
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
<span>Pages</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="more-error.html">Error pages</a>
</li>
<li class="dropdown-submenu">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Shop</a>
<ul class="dropdown-menu">
<li>
<a href="more-shop-list.html">List view</a>
</li>
<li>
<a href="more-shop-product.html">Product view</a>
</li>
</ul>
</li>
<li>
<a href="more-pricing.html">Pricing tables</a>
</li>
<li>
<a href="more-faq.html">FAQ</a>
</li>
<li>
<a href="more-invoice.html">Invoice</a>
</li>
<li>
<a href="more-userprofile.html">User profile</a>
</li>
<li>
<a href="more-searchresults.html">Search results</a>
</li>
<li>
<a href="more-login.html">Login</a>
</li>
<li>
<a href="more-locked.html">Lock screen</a>
</li>
<li>
<a href="more-email.html">Email templates</a>
</li>
<li>
<a href="more-blank.html">Blank page</a>
</li>
<li class="dropdown-submenu">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Blog</a>
<ul class="dropdown-menu">
<li>
<a href="more-blog-list.html">List big image</a>
</li>
<li>
<a href="more-blog-list-small.html">List small image</a>
</li>
<li>
<a href="more-blog-post.html">Post</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
<span>Layouts</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="layouts-sidebar-hidden.html">Default hidden sidebar</a>
</li>
<li>
<a href="layouts-sidebar-right.html">Sidebar right side</a>
</li>
<li>
<a href="layouts-color.html">Different default color</a>
</li>
<li>
<a href="layouts-fixed.html">Fixed layout</a>
</li>
<li>
<a href="layouts-fixed-topside.html">Fixed topbar and sidebar</a>
</li>
<li class="dropdown-submenu">
<a href="#">Mobile sidebar</a>
<ul class="dropdown-menu">
<li>
<a href="layouts-mobile-slide.html">Slide</a>
</li>
<li>
<a href="layouts-mobile-button.html">Button</a>
</li>
</ul>
</li>
<li>
<a href="layouts-footer.html">Footer</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
请帮助我。
答案 0 :(得分:0)
根据它的外观,你错过了这一部分。
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
将此部分放在div nav标题下。
答案 1 :(得分:0)
不,这部分是在3行之后。
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#teste"><i class="icon-reorder"></i>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>