Question

我制作了一个带引导程序的simpel导航栏（我从工作模板中复制）。我已经包含了最新的bootstrap.min.js和一个来自bootwatch的未经修改的CSS。

<div class="navbar navbar-default navbar-fixed-top" style="z-index:2;">
      <div class="container">
        <div class="navbar-header">
          <a href="../" class="navbar-brand"></a>
          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="navbar-collapse collapse" id="navbar-main">
          <ul class="nav navbar-nav navbar-right">
                      <li>
              <a href="../help/">Start</a>
            </li>
            <li>
              <a href="../help/">Leverantörer</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

然而，当我在手机上运行时，该按钮不会触发菜单。我做错了什么？

Answer 1

请检查此JSFIDDLE链接。您共享的相同代码似乎工作正常。

我已经从CDN中包含了bootssrap的css和JS。

＆＃13;

<div class="navbar navbar-default navbar-fixed-top" style="z-index:2;">
  <div class="container">
    <div class="navbar-header">
      <a href="../" class="navbar-brand"></a>

      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main"> <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
    </div>
    <div class="navbar-collapse collapse" id="navbar-main">
      <ul class="nav navbar-nav navbar-right">
        <li> <a href="../help/">Start</a>

        </li>
        <li> <a href="../help/">Leverantörer</a>

        </li>
      </ul>
    </div>
  </div>
</div>

＆＃13;

JSFIDDLE

Answer 2

好像你错过了添加bootstrap.js文件。

所以在关闭body标签之前添加此行。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</body> > <!-- please note I have added it just before closing body tag -->

bootstrap nav-bar collapse图标不会触发

2 个答案: