Question

 <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文件，但问题仍未解决

Answer 1

您需要将数据目标更改为#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），而不是您的菜单......

Answer 2

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

id

它也会起作用！

jsfiddle-link

navbar无法调整窗口大小

2 个答案: