ml-auto未将导航栏链接向右推动

Question

我正在使用 reactstrap 并且一直在按照这个链接：

https://reactstrap.github.io/components/navbar/

在这个例子中，<nav className='ml-auto' navbar> 把 <NavItem> 推向右边。然而，我要实现的效果（与示例非常相似）是 <NavItem> 渲染在 <NavbarBrand> 的旁边。

我已经检查了语法100次，看起来没问题。我自定义的 CSS 很少，似乎没有覆盖任何内容。控制台中的 CSS 看起来很相似，并且它似乎受到了影响：

.ml-auto, .mx-auto {
    margin-left: auto!important;
}

至少在控制台中将其关闭的示例中，<NavItem>被移动到了<NavbarBrand>旁边，就像在我的应用程序中一样（但我不想要这样）。以下是我所看到的内容：

Reactstrap示例（正确的间距）：

我的应用程序控制台（错误的间距）：

如何在我的应用程序中获得正确的间距？

对我来说真的不清楚是什么影响了margin-left: auto !important在一个地方能工作而在另一个地方则无法工作。

- cjones

---

请将 navbar-toggler 和 .navbar-collapse 从 div 元素中解除包裹……看起来您在 navbar-brand 后面使用了额外的 div 元素。请注意，不要改变原文意思，尽可能使翻译语言通俗易懂。 - Bhuwan

Answer 1

对于Bootstrap-5，我们需要使用ms-auto而不是ml-auto

- Nithin Kumar

---

这真的值得更多的赞誉。在React的Bootstrap页面上，根本没有提到“ms-auto”。只给了我“ml-auto”，以及这里的每一篇帖子。该死，你简直是个传奇。 - darthgamer64

这对我有用。我正在使用react-bootstrap，并使用yarn add bootstrap安装了最新的v5.0。重新安装bootstrap（yarn add bootstrap@4.6.0），现在正常工作。 - Kevin Aung

如果使用Bootstrap 5，应该选择这个答案作为被接受的答案。 - Ritesh Kumar

Answer 2

从 Bootstrap 5 2021 开始，间距工具的侧面名称发生了一些更改。

• 现在称为 Margin Start 的 Margin Left，因此请使用 ms 替代 ml

• 例如：将 margin-left 设置为自动对齐，请使用 ms-auto

• 同样地，设置左边距为 3，请使用 ms-3 而不是 ml-3

您可以在官方的 Bootstrap 文档 BootStrap Spacing Utilities 中了解有关边距和填充的新侧面名称的更多信息。

- Bijay Sharma

Answer 3

导航栏组件（以及许多其他组件）仅在按照它们被设计使用的方式使用时才能正常工作。

例如，ml-auto 只适用于兄弟元素。

如果您破坏了兄弟关系，它将无法起作用。

换句话说，您不能随意地在不必要的 div 中包装元素。

删除您放置在 navbar-toggler 和 collapse 组件周围的 div，以使兄弟选择器按预期工作。

此外：请勿在任何自定义 css 中永久使用 !important 标志作为解决方案。该标志仅用于快速测试。

P.S. 您似乎有将东西包装在不必要的 div 中的习惯。container 也包裹在这样一个无用的 div 中。不要因为某种"美学"而添加不必要的代码。只有当它实际上做了一些事情时才添加代码，并对其他所有内容使用注释。

- WebDevBooster

---

!important是由Bootstrap添加的。他们并没有制定这些CSS规则。 - ScottMichaud

Answer 4

ml-auto的工作原理解释。

在评论中已经解决了这个问题。我想补充一下，ml-auto之所以无法工作是因为它的flexbox父元素需要是导航栏的全宽度。因此，也可以通过向额外的div添加w-100来解决这个问题。

<nav class="navbar navbar-expand-md navbar-light bg-faded">
     <a class="navbar-brand" href="#">reactstrap</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="navbar-toggler-icon"></span>
     </button>
     <div class="w-100">
        <div class="navbar-collapse collapse">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                ...
            </ul>
        </div>
     </div>
 </nav>

ml-auto 的工作原理是由于flexbox父元素默认情况下"缩小"子块级元素，这与兄弟元素无关，即使在flexbox父元素中只有一个子元素也可以正常工作： https://www.codeply.com/go/xPaoNJMzbG 这是一篇关于如何使用flexbox自动边距的好文章。

- Zim

---

我尝试将w-100添加到父元素（在我的情况下是行），但没有任何区别。当我使用ml-auto时，按钮仍然没有正确对齐。然而，添加text-right类有效，并且按钮正确地右对齐。 - dcp

Answer 5

在Bootstrap-5中有一些变化，以前的"ml-auto"表示margin-left:auto，现在更改为"ms-auto"，类似地"mr-auto"更改为"me-auto"。但是对于顶部和底部来说，与Bootstrap-5之前的版本相同，即Bootstrap-5之前的版本。

更多详情请访问文档。

- soraku02

---

是的，如果您使用的是Bootstrap 5版本，那么这个答案是正确的。 - Pawara Siriwardhane

Answer 6

我正在使用 bootstrap@5.0.X

如果你在2021年遇到了这个问题，那是因为 class 名称已经发生了迁移和更改。

.ml-* 和 .mr-* 被修改为 .ms-* 和 .me-*。

类似的许多其他 class 名称也已经被更改。

链接查看迁移信息

Bootstrap 迁移链接

- confused_