2016-03-04 141 views
0

我的導航欄中有一個摺疊按鈕,但它不起作用。這個例子有兩個導航欄,但我只需要摺疊一個導航欄。導航欄摺疊不起作用引導3

我已經嘗試過不同的方法,但是我沒有解決我的問題。

問題是,當瀏覽器被最小化時,按鈕不會出現。

下面是代碼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

不知道你的問題是什麼..請詳細說明 – Minh

回答

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導航標題下。

+0

編輯:上月底錯過了>。應該現在確定 – JoeyG

+0

好的,那麼究竟是什麼問題呢?作爲導航欄,並有一個下拉按鈕,但它不可見,品牌高於導航...請給出更多信息,問題是什麼。 – JoeyG

+0

好吧,我得到了下拉菜單,但漢堡菜單圖標不存在..是計劃還是這也是問題? – JoeyG

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