崩潰的引導導航欄不起作用

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