Question

我很困惑我应该使用哪些代码，哪些代码不应该。所以我只是将网站放到Dropbox并在此处发布链接。

http://shaylakarzon.kissr.com/nav/index.html

请检查导航栏。它的反应灵敏，但在窗户较小时不起作用。

我搞砸了什么。当我的导航栏单一时，它的工作正常。但是当我试图用我的滑块调整它时会产生问题。在小型设备布局中，当我点击仅限sr按钮时，它会显示菜单，但如果我再次点击sr-only按钮，则菜单不会返回。

码

        <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button class="navbar-toggle collapsed" 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>
        </div>  <!-- container-fluid  -->
        <div class="collapse navbar-collapse" id="navbar-collapse">
          <ul class="nav navbar-nav" id="navbar-scroll">
              <li class="active"><a href="">Home</a></li>
              <li><a href="">Blog</a></li>
              <li><a href="">About Us</a></li>
              <li><a href="">Contact Us</a></li>
          </ul>
            <div class="navbar-right login_poopup">
                <p id="login_poopup"><a>Login<span class="caret"></span> </a></p>     
            </div>
        </div>

    </nav>

Answer 1

在链接的bootstrap css文件链接之前链接了一般的jquery文件链接像这样。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

为什么导航栏collaspe不起作用？

1 个答案: