单击小型设备上的切换按钮时，Bootstrap导航栏将消失

Question

这就是我所拥有的：

    <div class="container" style="padding-top: 70px;">
<div id="navbar">
    <!-- Fixed navbar -->
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">
          <div class="col-xs-2"><img src="img/favicon.png" alt="Dev Icon" height="20px" width="20px"></div><div class="col-xs-10">FrontEnd Dev</div></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">

            <?php include('includes/navbar.php'); ?>

        </div><!--/.nav-collapse -->
      </div>
    </nav>
</div>

<?php include('includes/navbar.php'); ?> <?php include('includes/navbar.php'); ?>只是从另一个数组文件中添加<ul class="nav navbar-nav">和<li>标记。

仅当切换按钮在较小的设备上可用时，才会发生此问题。 单击该按钮在视觉上没有任何作用（但是它确实会更改代码中的类）。 再点击几次按钮将导致整个导航栏消失。 我删除了可能影响导航栏的所有其他CSS样式，但仍然相同。 我通过Bootstrap网站上的CDN链接使用Bootstrap v3.3.7。

Answer 1

我发现了问题。 切换按钮具有data-target="#navbar" ，其目标是<div id="navbar" class="navbar-collapse collapse"> 。 我没有意识到我把所有导航栏都包裹在一个带有导航栏ID的“ div”中。 这就是冲突所在。