Question

我有这个导航栏。它在常规屏幕宽度下工作得很好，但折叠时，移动导航栏按钮不起作用。我试图找到任何未公开的div和其他问题，但无法识别任何问题。在此先感谢您的帮助！对初学者问题抱歉

<nav class="navbar navbar-default" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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>

    </div>
    <div class="navbar-brand" href="#">
        <div class="text-center">  
            <a href="http://localhost:3000/"><img alt="nav" src="/assets/navbar.png" /></a> 
        </div>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="navbar-collapse-1">
        <h4>
            <ul class="nav navbar-nav navbar-left">
                <!--  <li>  <a href="/help">Help</a> </li>-->
                <li>  <a href="/Buy">Buy</a> </li>



            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>  <a href="/new">Search</a> </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">My purchases<span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li> <a href="/lebron">My profile</a> </li>
                        <li class="divider"></li>
                        <li>  <a href="/Bought">Items bought</a> </li>
                        <li>  <a href="/Sold">Items sold</a> </li>
                        <li class="divider"></li>
                        <li>  <a href="/purchases">Purchase history</a> </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li>  <a href="/users/edit">Edit my profile</a> </li>
                        <li>  <a href="/myprofile">Manage my profile</a> </li>
                        <li class="divider"></li>
                        <li class="dropdown-header">GOODBYE </li>
                        <li>  <a data-method="delete" href="/users/sign_out" rel="nofollow">Logout</a> </li>
                    </ul>
                </li>

    </div><!-- /.navbar-collapse -->
</nav>
</h4>

Answer 1

清理你的HTML，它应该可以正常工作。有几个缺失的关闭代码（/ul，/div），/h4在结尾处关闭。

http://bootply.com/ytu2dul2yw

折叠的bootstrap导航栏无法正常工作

1 个答案: