bootstrap 3 上自定义导航栏的移动响应能力

Question

我一直在寻找此修复程序一段时间。我是 y=使用 Bootstrap 3 的超棒响应能力，一切都很顺利，直到我尝试在移动设备上查看导航栏时崩溃。我遇到的问题是切换导航的按钮似乎根本不起作用。我认为这可能与 my 的顺序有关，但我只是不知道...

这是我的代码--->

head标签里的东西------->

        <!-- Latest compiled and minified CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">

         <!-- Custom tstylesheet -->
         <link href="css/custom.css" rel="stylesheet">

         <!-- Latest compiled and minified JavaScript -->
         <script src="js/bootstrap.js"></script>
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">        </script>

---------

<div class="container nav-border">
    <nav class="navbar" role="navigation">
        <div class="navbar-header navbar-inverse">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navcol">
                <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 class="collapse navbar-collapse nav-list" id="navcol">
                <ul class="collapse nav-list navbar-collapse row" id="navcol">
                    <li class="col-lg-4 col-md-4 col-sm-4 active"><a href="index.html"> HOME</a></li>
                    <li class="col-lg-2 col-md-2 col-sm-2 "><a href="about.html"> ABOUT AETHER</a></li>
                    <li class="col-lg-2 col-md-2 col-sm-2 "><a href="spookfish.html"> SPOOKFISH</a></li>
                    <li class="col-lg-2 col-md-2 col-sm-2 "><a href="services.html"> SERVICES</a></li>
                    <li class="col-lg-2 col-md-2 col-sm-2 "><a href="representation.html"> REPRESENTATION</a></li>
                </ul>
            </div>    
    </nav>
</div>

----------------

样式表中没有太多针对导航的内容，除了这个 ---------->

    .nav-border {
    border-top:thin solid #000;
    margin-top:50px;
}

.nav-list {
    list-style:none;
}

.nav-list a:hover {
    border-top: solid #000;

}

.nav-list a {
    text-decoration:none;
    color:#000;
}

----------

Answer 1

看来这里有很多问题...

• 我没有看到您在 bootstrap.js 文件之前包含 jQuery
• 看起来您将 boostrap.js 文件包含了两次...您只需要一个。
• 您在两个元素navcol 上具有相同的ID。 ID 必须是唯一的。

这只是一个开始……我建议花时间再读一遍documentation。

Here 是我认为您正在尝试做的演示......将其与您所拥有的进行比较并尝试了解差异。