Navbar崩溃没有工作bootstrap 3

时间:2016-03-04 19:16:36

标签: navbar

我的导航栏中有一个折叠按钮,但它不起作用。此示例有两个导航栏,但我只需要折叠一个导航栏。

我已经尝试过不同的方法,但我无法解决问题。

问题是当浏览器最小化时按钮不会出现。

以下是代码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 &amp; Chat</a>
                    </li>
                    <li>
                        <a href="components-gallery.html">Gallery &amp; Thumbs</a>
                    </li>
                    <li>
                        <a href="components-tiles.html">Tiles</a>
                    </li>
                    <li>
                        <a href="components-icons.html">Icons &amp; 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 &amp; 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>  

请帮助我。

2 个答案:

答案 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>

Code Fiddle