Bootstrap 4 导航栏与按钮右对齐，不会在移动设备上折叠

Question

我试图在导航栏上放置 3 个元素。左对齐的品牌，右对齐的一组在移动设备上折叠的链接，以及一个与链接一样右对齐的附加按钮，但不应与它们一起折叠。

为了右对齐按钮和链接，我将它们包裹在 ml-auto div 中。这在移动设备上效果很好（第一张图片），但在 PC 上，按钮出现在链接上方（第二张图片）。我尝试将 btn-group 添加到 div 中，这种方法可行，但按钮与链接合并，看起来很奇怪（第三张图片）。

如何正确水平对齐这些组件？

请注意，我不希望该按钮与其他右侧链接位于同一组中。我希望即使在小屏幕上该按钮也始终可见。我在 SO 上看到过一些类似的问题，但它们在同一个可折叠组中都有正确对齐的项目，这对我来说没有好处。

您可以将以下代码粘贴到w3school TryIt 编辑器

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
   <a class="navbar-brand" href="#">Home</a>


<div class="ml-auto">
            <button class="btn btn-success">My Button</button>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
              <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto"/>
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Right Link 1</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Right Link 2</a>
                    </li>

                </ul>
        </div>
</nav>

Answer 1

现有的答案都不起作用，并且需要复杂的技巧，而这些技巧不能正确使用 Bootstrap 4 导航栏。这些答案中的导航栏在移动设备上无法正常显示。仅.row用于包含网格列，并且网格不支持导航栏内容

答案很简单。您需要的唯一调整是flex-grow-0禁用navbar-collapse. 这允许ml-auto将按钮推到右侧。

<nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-end">
    <a class="navbar-brand" href="#">Home</a>
    <button class="btn btn-success ml-auto">My Button</button>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse flex-grow-0" id="navbarSupportedContent">
        <ul class="navbar-nav text-right">
            <li class="nav-item active">
                <a class="nav-link" href="#">Right Link 1</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="#">Right Link 2</a>
            </li>
        </ul>
    </div>
</nav>

navbar-nav如果您希望链接在移动设备上正确显示，请另外添加 text-right 。

演示： https: //www.codeply.com/go/ljI9F6aRLk

另请参阅：Bootstrap 4 - 折叠外的导航栏项目