html - 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

折叠为 768 像素，因此一旦折叠，navbar此媒体查询将navbar-nav向右浮动navbar。

这是一个 jsFiddle 演示

CSS

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