html - Bootstrap 4导航栏右对齐在移动设备上不折叠的按钮

问题描述

我试图在导航栏上有 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>

标签： htmlcssbootstrap-4

现有的答案都不起作用，并且需要复杂的技巧，这些技巧不能正确使用 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 - 折叠外的导航栏项目

html - Bootstrap 4导航栏右对齐在移动设备上不折叠的按钮

问题描述

解决方案

推荐阅读