html - Bootstrap : order elements with the 'navbar-right' class

Question

在多个元素上使用 navbar-right 类时，似乎我必须以我希望它们显示的相反方式对后者进行排序。

例如，在我的导航栏右侧，我想要一个搜索表单和用户图标。所以，我这样做了:

<form class="navbar-form navbar-right" role="search">
    <div class="form-group">
         <input type="text" class="form-control" placeholder="Search">
         <button type="submit" class="btn btn-default">Submit</button>
    </div>
</form>
<ul class="nav navbar-nav navbar-right">
    <li><a href="#"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></a></li>
</ul>

但是，如果我这样做，用户图标将位于搜索栏的右侧...

我发现的唯一解决方法是这样写:

<ul class="nav navbar-nav navbar-right">
    <li><a href="#"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
        <button type="submit" class="btn btn-default">Submit</button>
    </div>
</form>

这正是我想要的，但我认为这不是正确的解决方案。

Answer 1

Bootstrap 在其网站上建议应用 .navbar-right 存在问题到多个元素

Right aligning multiple components Navbars currently have a limitation with multiple .navbar-right classes. To properly space content, we use negative margin on the last .navbar-right element. When there are multiple elements using that class, these margins don't work as intended. We'll revisit this when we can rewrite that component in v4.

我建议将表格放在 <ul></ul> 中标签。