切换按钮折叠在引导程序的引导程序导航栏中不起作用

Toggle button collapse not working in Bootstrap navbar in bootstrap

本文关键字：引导程序 导航 不起作用 按钮 折叠      更新时间：2023-09-26

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

我已经多次将我的导航栏与引导程序进行了比较。 为什么它不起作用？

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

更改 ：

<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>
相关文章：