Question

我一直无法获得引导切换按钮，以便在单击时显示菜单项“我们做什么”，“关于”或“联系”。它会正确折叠，但在点击时无法正常工作。

我玩过很多东西，我知道如何解决它，但无法理解。

    <!--Logo-->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">ACS</a>
    </div>

    <!--Menu Items-->
    <div class="collapse navbar-collapse" id="mainNavBar">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li class=""><a href="#">What We Do</a></li>
            <li class=""><a href="#">About</a></li>
            <li class=""><a href="#">Contact</a></li>
        </ul>
    </div>

</div>

Answer 1

菜单未正确链接到代码中的按钮。出现在ACS的是链接，但是此链接不是针对菜单，按钮是。

我添加了一个代码段。您只需要进行一些细微的更改即可使其正常工作。

（顺便说一句，我现在只注意到，它使用了bootstrap 3.36 - 我最初使用'Bootstrap latest'库创建了使用jsbin的代码片段！）

.navbar-header button {
  color: #337ab7;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div>
  <div class="navbar-header">
    <button type="button" class="navbar-toggle navbar-brand" data-toggle="collapse" data-target="#mainNavBar">ACS
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
  </div>

  <!--Menu Items-->
  <div id="mainNavBar" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class=""><a href="#">What We Do</a></li>
      <li class=""><a href="#">About</a></li>
      <li class=""><a href="#">Contact</a></li>
    </ul>
  </div>

</div>

Answer 2

您应始终确保在添加脚本文件或CDN时，将jquery.js文件或CDN链接放在bootstrap.js文件或CDN链接之前。

您可以在bootstrap的官方网站上找到更多信息：https://getbootstrap.com/docs/4.2/getting-started/introduction/

Bootstrap切换按钮无效

2 个答案: