Question

我在codepen上构建了一个bootstrap导航栏，它会折叠移动设备并显示一个图标栏，点击该图标栏时会展开菜单，但点击时菜单不会展开。谁能告诉我我做错了什么？

我已经在CSS页面启用了引导程序，并在Javascript页面上启用了jquery和bootstrap。

这是指向codepen的链接：http://codepen.io/bonfirehead/pen/xVxRxq

提前感谢您的帮助！

<div class="container-fluid">

  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">


      <button class="navbar-toggle" data-toggle="collapse" data-   target="#myNavBar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <div class="collapse navbar-collapse" id="myNavBar">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">CV</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </div>
  </nav>

  <div class="row">
    <div class="column-xs-6 background1">
    </div>



    <h2 class="background2 nopadding text-center"></h2>
    </p>
  </div>
</div>

<div class="column-xs-6">
</div>
</div>

Answer 1

我无法在codepen或codeply上重现错误 - 导航栏上的移动样式下拉列表在点击时会正确显示。

话虽如此，在第24行，您有一个结束</nav>标记，但缺少开头标记。在第32行，您有一个未打开的</p>标记，并在第37行再次显示未打开的</div>。我已经看到过，在这样的事情上，HTML可能有点笨拙，所以请尝试纠正这些，看看是否能解决问题。

bootstrap导航栏折叠图标不会在codepen中触发

1 个答案: