2015-06-17 3 views
2

Это мой navbar, созданный bootstrap Почему кнопка не работает в небольших размерах?Свернуть тумблер Свернуть не работает в Bootstrap navbar в bootstrap

Я несколько раз сравнивал свой навигатор с бутстрапом. почему это не работает?

<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> 
+1

вы включили '' jquery.js' и bootstrap.js', которые требуется для функций коллапса? показать нам http://www.bootply.com/ demo? – Ravimallya

+0

Да, эти предметы включены в голову. проблема заключается в формировании навигатора в небольших размерах. –

ответ

4

Изменение:

<a href="#">Pages<span class="caret"></span></a> 

с:

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Pages <span class="caret"></span></a> 

EDITED

Был некоторые проблемы с вашим HTML:

Найдено незакрытый класс: <div class="container container-class>

data-target=".nav-collapse" 

должны быть

data-target=".navbar-collapse"

Сейчас он работает:

<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> 
+0

большое вам спасибо. но как насчет сворачивания навигатора? Я имею в виду, что navbar не складывается в кнопку в небольших размерах –

+0

Амир, я только что редактировал свои ответы, чтобы добавить дополнительную информацию –

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