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

- Amir Amiri

---

你是否已经引用了 jquery.js 和 bootstrap.js 以便使用折叠功能？可以给我们展示一个 http://www.bootply.com/ 的演示吗？ - Ravimallya

是的，这些项目包含在头部。问题在于小尺寸下导航栏的形状。 - Amir Amiri

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>

- Alex Coloma

---

非常感谢。但是关于折叠导航栏呢？我的意思是在小尺寸下，导航栏不会变成按钮形状。 - Amir Amiri