html - 具有三个元素的 Bootstrap 4 NAVBAR

Question

我正在尝试使用 Bootstrap 4，在 navbar 中包含三个元素。我想要左边的品牌，右边的 navbar-nav 元素。

那部分很简单，我的问题是我想要另一个应该左对齐的部分，紧挨着 BRAND。

当屏幕很大时，它会做我想做的事(见下文)。

我的问题是屏幕变小。第 3 个元素跳到中间，我不明白为什么。

文档让我相信我可以使用 flex 行为，但我尝试过的都不起作用。

这可以开箱即用吗？

我已经在 codeply 上设置了一些示例代码，可以在这里看到:http://codeply.com/go/6y6XapGG4k

当视口(viewport)变大时，您可以看到 example.com 按钮显示在左侧。当屏幕缩小并且菜单项收缩时，example.com 按钮会跳到屏幕中间。

我试图将按钮保留在左侧，BRAND 旁边。

Answer 1

将“mr-auto”类添加到您的“navbar-nav”

<div class="navbar-nav mr-auto">
    <div class="dropdown">
      <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
            example.com
      </button>
    </div>
</div>