Bootstrap 导航栏切换按钮不起作用 [英] Bootstrap Navbar toggle button not working

问题描述

当我缩小窗口并单击按钮时，它没有响应.我该如何解决这个问题?

<span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><div class="collapse navbar-collapse"><ul class="nav navbar-nav"><li><a href="">第 1 页</a><li><a href="">第 2 页</a><li><a href="">第 3 页</a>

库是 jQuery 2.1.3 和 bootstrap 3.3.1.

解决方案

您的代码看起来很棒，我唯一看到的是您没有在按钮选择器中包含折叠的类.http://www.bootply.com/cpHugxg2f8注意:需要 JavaScript 插件如果 JavaScript 被禁用并且视口足够窄以致导航栏折叠，则将无法展开导航栏并查看 .navbar-collapse 中的内容.

响应式导航栏要求在您的 Bootstrap 版本中包含折叠插件.

<div class="容器"><nav class="navbar navbar-inverse navbar-static-top"><div class="容器"><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">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand" href="#">项目名称</a>
<div id="navbar" class="navbar-collapse collapse"><ul class="nav navbar-nav"><li><a href="">第 1 页</a><li><a href="">第 2 页</a><li><a href="">第 3 页</a>

</nav>

When I shrink the window and click the button it doesn't respond. How do I fix this?

<button type="button" 
        class="navbar-toggle" 
        data-toggle="collapse" 
        data-target=".navbar-collapse">

    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

<div class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
        <li>
            <a href="">Page 1</a>
        </li>
        <li>
            <a href="">Page 2</a>
        </li>
        <li>
            <a href="">Page 3</a>
        </li>
    </ul>

Libraries are jQuery 2.1.3 and bootstrap 3.3.1.

解决方案

Your code looks great, the only thing i see is that you did not include the collapsed class in your button selector. http://www.bootply.com/cpHugxg2f8 Note: Requires JavaScript plugin If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse.

The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.

<div class="navbar-wrapper">
      <div class="container">

        <nav class="navbar navbar-inverse navbar-static-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="#">Project name</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                    <li><a href="">Page 1</a>
                    </li>
                    <li><a href="">Page 2</a>
                    </li>
                    <li><a href="">Page 3</a>
                    </li>

              </ul>
            </div>
          </div>
        </nav>

      </div>
    </div>

这篇关于Bootstrap 导航栏切换按钮不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！