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库时才有效。将此内容添加到index.html和</body>标记之前的其他页面

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

Twitter Bootstrap Nav折叠不正常

2 个答案: