css - Bootstrap 3 - 是否可以像这样右对齐表单和下拉列表？

Question

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

我的问题是:

1. 按照我的方式对齐组件是否正确，或者是否有这样做的最佳做法？
2. 我可以在下拉列表类中使用字形图标，还是需要为此使用按钮下拉列表？

您可以在下面查看我的代码。我希望你能给我建议或给一个好的提示。谢谢。

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

Answer 1

将 navbar-right 与您的 navbar-form 一起使用，并将其放在 UL 之外。参见示例。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<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 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>
      <form class="navbar-form navbar-right">
        <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>
    </div>
    <!--/.navbar-collapse -->
  </div>
</nav>