Css Bootstrap 3-是否可以像这样右对齐窗体和下拉列表？

过了一段时间，我设法将下拉列表完全放在右边，并将表单和下拉菜单右对齐。我还在下拉列表中使用了一个字形图标

我的问题是：

按照我的方式对齐组件是正确的还是有最佳做法

我可以在下拉类中使用glyphicon，还是需要使用按钮下拉列表

你可以在下面查看我的代码。我希望你能给我建议或给我一个好的小费。多谢各位

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <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="{{ path('homepage') }}">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <form class="navbar-form">
                        <div class="form-group">
                            <input type="text" placeholder="Email" class="form-control">
                        </div>
                        <div class="form-group">
                            <input type="password" placeholder="Password" class="form-control">
                        </div>
                        <button type="submit" class="btn btn-success">Sign in</button>
                    </form>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <span class="glyphicon glyphicon-globe" aria-hidden="true"></span> 
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right">
                        <li><a href="#">Acción #1</a></li>
                        <li><a href="#">Acción #2</a></li>
                        <li><a href="#">Acción #3</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Acción #4</a></li>
                    </ul>
                </li>
            </ul>
        </div><!--/.navbar-collapse -->
    </div>
</nav>

切换导航


登录

将

导航栏右侧

与您的

导航栏表单一起使用

，并将其放置在UL之外。参见示例

切换导航















登录

非常感谢@vanburenx。我试过了，当导航栏崩溃时，下拉列表放在第一个位置，这样看起来更好。这是引导设置处理它的默认方式。很高兴我能帮忙。