带子菜单的Bootstrap导航栏

Question

我是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 -->

有关工作示例，请查看this

但结果远非我的预期

Answer 1

检查this。希望这会有所帮助。

我已使用row-fluid类，因此span类不会有固定宽度。我已经使用span来划分div。

Answer 2

我认为你应该尝试添加课程＆＃34; .col-sm - ＆＃34;或＆＃34; .col-xs - ＆＃34;。

您可以在here

查看