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应用于多个元素

存在问题

右对齐多个组件Navbar目前有一个限制有多个.navbar-right类。为了适当地空间内容，我们使用最后一个.navbar-right元素的负边距。什么时候有使用该类的多个元素，这些边距不起作用意。当我们可以在第4版中重写该组件时，我们将重新审视这一点。

我建议将表单放在<ul></ul>标记内。

Bootstrap：使用'navbar-right'类订购元素

1 个答案: