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'); ?>只是将<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'中。所以这就是冲突所在。

单击小型设备

1 个答案: