Css 带子菜单的引导导航栏

我对bootstrap还不熟悉，我正在尝试创建一个导航条，看起来像这样

当你把浏览器调整到更小的尺寸时，它看起来是这样的

目前我尝试的是：

<div id="top-nav" class="navbar navbar-inverse navbar-fixed-top">
    <div class="row">
    <div class="col-md-12">
        <div class="navbar-header">
             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                 <span class="sr-only">Toggle navigation</span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </button>
            <a class="navbar-brand" href="#">BiddingTool</a>
        </div>

        <ul class="nav navbar-nav">
            <li><a href="../${ usertype }/projects.do"><i class="glyphicon glyphicon-road"></i> Projects</a></li>
            <c:if test="${ usertype eq 'admin' }">
                <li><a href="../admin/database.do"><i class="glyphicon glyphicon-list"></i> Database</a></li>
            </c:if>
        </ul>

        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="../${ usertype }/projects.do"><i class="glyphicon glyphicon-road"></i> Projects</a></li>
                <c:if test="${ usertype eq 'admin' }">
                    <li><a href="../admin/database.do"><i class="glyphicon glyphicon-list"></i> Database</a></li>
                </c:if>
            </ul>
            <ul class="nav navbar-nav navbar-right" style="margin-right: 5px;">
                <li><a href="../logout.do"><i class="glyphicon glyphicon-lock"></i> Logout</a></li>
            </ul>
        </div>
    </div>
    </div><!-- /container -->
</div><!-- /.Navigation Bar -->

例如，请看

但结果与我预期的相去甚远。希望这有帮助

---

我使用了row流体类，所以span类没有固定的宽度。我使用span来划分div。

我认为您应该尝试添加class.col sm-或.col xs-

---

您可以在

中检查折叠按钮在第二次单击时不起作用