2016-03-04 3 views
0

У меня есть рушающаяся кнопка в моем навигаторе, но она не работает. В этом примере есть два навигатора, но мне нужно свернуть только один навигатор.Navbar collapse не работает bootstrap 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 nav.

+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

Смежные вопросы