切換按鈕崩潰不能在Bootstrap導航欄中的引導程序中工作

Question

這是我的導航欄由引導程序創建的 爲什麼按鈕無法在小尺寸下工作？

我已經將我的導航欄與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> 

Answer 1

變化：

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