折叠Bootstrap导航栏时向左拉下拉列表

Question

我在应用信息中心使用Bootstrap 3，并且我使用导航栏遇到了问题。我添加了一个正确显示的下拉菜单，但是一旦我调整窗口大小并且导航栏被折叠，它就显示在左侧而不是右侧。我该怎么做才能解决它？

在这里，您可以找到包含问题和我需要的屏幕截图，以及一些代码：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<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="#">Dashboard</a>
</div>

<c:if test="${not empty username}">
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown"><a href="#" class="dropdown-toggle"
                data-toggle="dropdown">${username} <span
                    class="glyphicon glyphicon-user"></span><b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="<c:url value='/logout' />">Logout</a></li>
                </ul></li>
        </ul>
    </div>
</c:if>

Answer 1

navbar以768像素的速度折叠，因此在navbar-nav折叠后，此媒体查询会将navbar向右浮动。

Here is a jsFiddle Demo

<强> CSS

@media (max-width: 768px){
    .navbar-nav{
        text-align: right;
    }
}