javascript - 切换按钮折叠在 Bootstrap 中的 Bootstrap 导航栏中不起作用

Question

这是我用 bootstrap 创建的导航栏为什么按钮在小尺寸时不起作用？

我已经多次将我的导航栏与 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>

已编辑

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