Twitter Bootstrap Nav折叠不正常

Question

即时通讯使用Twitter bootstrap为我的响应,我希望导航将成为一个按钮,当它在移动设备上观看时,小屏幕显示的按钮,但当我点击它时,它不会滑动显示我的锚点这里是我的代码

<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>

谢谢你的帮助!

Answer 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>

Answer 2

当您在HTML中包含jQuery库files.add此之前您的index.html和其他页面导航弥合将只能</body>标签

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