Bootstrap导航栏折叠无法在正确的位置打开

Question

当我点击按钮在移动模式下展开导航时，它不会将内容向下推，只是在按钮旁边打开一个非常小的菜单，我做错了吗？

    <div class = "container">

        <a href = "#" class = "navbar-brand">Website Logo Goes Here</a>

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

        <div class = "collapse navbar-collapse navHeaderCollapse">

            <ul class = "nav navbar-nav navbar-right">
                <li class=" bg-warning"><a href="#">Home</a></li>
                <li class = "dropdown">
                    <a href="#" class="dropdown-toggle bg-info" data-toggle="dropdown">Games <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Nintendo 3DS</a></li>
                        <li><a href="#">Nintendo DS</a></li>
                        <li><a href="#">Nintendo GBA</a></li>
                        <li><a href="#">Sony PSP</a></li>
                        <li><a href="#">Sony PS2</a></li>
                        <li><a href="#">View All</a></li>
                    </ul>
                </li>
                <li class="bg-warning"><a href="#">Games</a></li>
                <li class="bg-info"><a href="#">Search</a></li>
                <li class="bg-success"><a href="#">Help</a></li>
                <li class="bg-danger"><a href="#">Blog</a></li>
            </ul>

        </div>

    </div>

Answer 1

您缺少需要的几个包装器div，您应该在切换按钮下移动徽标。它应该是这样的：

<div class = "container">

 <nav class="navbar navbar-default">
   <div class="navbar-header">

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

  <a href = "#" class = "navbar-brand">Website Logo Goes Here</a>
   </div>

        <div class = "collapse navbar-collapse navHeaderCollapse">

            <ul class = "nav navbar-nav navbar-right">
                <li class=" bg-warning"><a href="#">Home</a></li>
                <li class = "dropdown">
                    <a href="#" class="dropdown-toggle bg-info" data-toggle="dropdown">Games <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Nintendo 3DS</a></li>
                        <li><a href="#">Nintendo DS</a></li>
                        <li><a href="#">Nintendo GBA</a></li>
                        <li><a href="#">Sony PSP</a></li>
                        <li><a href="#">Sony PS2</a></li>
                        <li><a href="#">View All</a></li>
                    </ul>
                </li>
                <li class="bg-warning"><a href="#">Games</a></li>
                <li class="bg-info"><a href="#">Search</a></li>
                <li class="bg-success"><a href="#">Help</a></li>
                <li class="bg-danger"><a href="#">Blog</a></li>
            </ul>

        </div>
    </nav>
  </div>