Twitter Bootstrap Nav Collapsing 无法正常工作答案

【问题标题】：Twitter Bootstrap Nav Collapsing not working properlyTwitter Bootstrap Nav Collapsing 无法正常工作
【发布时间】：2014-04-06 07:28:36
【问题描述】：

我使用 twitter 引导程序进行响应，我希望 Nav 在移动设备上查看时成为一个按钮，小屏幕显示按钮，但是当我单击它时，它不会滑动以显示我的锚这是我的代码

<header class="navbar navbar-static-top marginTop">
    <div class=" col-md-6 ">
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <img src="http://localhost/wordpress/wp-content/uploads/2014/03/logo.png" alt="" />
    </div>

    <div class="col-md-6">
        <nav class="collapse navbar-collapse marginTopInNavBar">
            <ul class="nav navbar-nav parentUl text-center floatLeft" >
                <li class="dropdown parentNavLi floatLeft">
                    <a href="#" class="parentNavA floatLeft" id="first">Compare Prices</a>
                    <img src="http://localhost/wordpress/wp-content/uploads/2014/03/shadowNav.png" alt="" />
                </li>

                <li class="dropdown parentNavLi floatLeft">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle parentNavA floatLeft">Buying Guides</a>
                    <img src="http://localhost/wordpress/wp-content/uploads/2014/03/shadowNav.png" alt="" />
                    <ul class="dropdown-menu childUl text-left floatLeft" id="menu1">
                        <li class="childLi"><a href="#" class="childA">Guide 1</a></li>
                        <li class="divider"></li>
                        <li class="childLi"><a href="#" class="childA">Guide 2</a></li>
                        <li class="divider"></li>
                        <li class="childLi"><a href="#" class="childA">Guide 3</a></li>
                        <li class="divider"></li>
                        <li class="childLi"><a href="#" class="childA">Guide 4</a></li>
                    </ul>
                </li>
                <li class="dropdown parentNavLi floatLeft">
                    <a href="#" class="parentNavA floatLeft">POS Type</a>
                        <img src="http://localhost/wordpress/wp-content/uploads/2014/03/shadowNav.png" alt="" />
                </li>
                <li class="dropdown parentNavLi floatLeft">
                    <a href="#" class="parentNavA floatLeft" id="last">Find Dealer</a>
                </li>
            </ul>
        </nav>
    </div>
</header>

感谢您的帮助！

【问题讨论】：

标签： twitter-bootstrap navbar nav

【解决方案1】：

在顶部试试这个：

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

另外，将其添加到页面底部的结束标记之前

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>

【讨论】：

如果有帮助请告诉我
btw .. 为什么要删除切换导航并更改 data-target="#bs-example-navbar-collapse-1"

【解决方案2】：

仅当您在 html 文件中包含 jquery 库时，导航折叠才有效。将其添加到您的 index.html 和 </body> 标记之前的其他页面

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>

【讨论】：