导航栏无法调整窗口大小

navbar is not working on resizing the window

本文关键字：调整 窗口大小 导航      更新时间：2023-09-26
 <nav class="navbar navbar-default" role="navigation" id="my-navbar">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="navbar-brand-centered navbar-brand ">
                <a href="#" class="navbar-brand">
                 <img alt="Brand" src="assets/img/logo.png">
                </a></div>
            </div> 
            <div class="collapse navbar-collapse" id=" navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
            <li><a href="" class="glyphicon glyphicon-user btn btn-default navbar-btn navbar-right"> MyReservations </a>
           </li>
            <li> <a href="" class="glyphicon glyphicon-phone-alt btn btn-info navbar-btn navbar-right"> +919986040064 </a> </li>
            <li><a href="" class="glyphicon glyphicon-envelope btn btn-warning navbar-btn navbar-right"> saritha@myotels.com </a>
            </li>               
          </ul>

            </div>
        </div>
    </nav>

我正在使用这个导航栏。调整窗口大小时，会出现切换按钮，但单击它时没有任何反应。是否有任何编码错误。我已经包含了bootstrap.min.css和bootstrap.min.js和jquery.js文件，但问题仍未解决

您需要将数据

目标更改为#navbar-collapse：

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
     <span class="sr-only">Toggle navigation</span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
</button>

您定位的是不同的元素（#navbar-brand-centered），这是您的徽标所在的位置，而不是您的菜单......

<button>的data-target必须与<div class="collapse navbar-collapse"的id相同，以及解决此问题的另一种方法，以更改id：

<div class="collapse navbar-collapse" id="navbar-brand-centered">

它也会起作用！

JSFIDDLE-link

相关文章：