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在一个而不是另一个中工作的原因。

Answer 1

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

Answer 2

从 Bootstrap 5 2021 开始，间距实用程序的边名有一些变化。

Margin Left 现在称为 Margin Start，因此使用 ms 而不是 ml
示例：将 margin-left 设置为 auto ：使用 ms-auto
同样设置 margin left 为 3 ：使用 ms-3 而不是 ml-3

您可以在官方引导程序文档 BootStrap Spacing Utilities

中了解有关边距和填充的新侧边名称的更多信息

Answer 3

导航栏组件（以及许多其他组件）仅在您按照设计使用方式使用时才有效。

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

如果你破坏了这种兄弟关系，它就无法发挥作用。

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

删除围绕导航栏切换器和折叠组件放置的div，以使兄弟选择器按预期工作。

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

P.S。你似乎习惯将事物包装在不必要的div中。 container也包含在这样一个无用的div中。不要为某种＆＃34;美学添加不必要的代码＆＃34;。只有在实际执行某些操作时才添加代码，并对其他所有内容使用注释。

Answer 4

关于ml-auto如何运作的说明。

看来这已在评论中得到解决。我只是想添加ml-auto无效的说明，因为它的flexbox 父级需要是导航栏的全宽。因此，它也可以通过将w-100添加到额外的div来解决。

<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父级＆＃34;缩小＆＃34;的方式而起作用。默认情况下，子块元素。它与兄弟元素无关，只能在flexbox父级中只有一个孩子正常工作：here

这里是https://www.codeply.com/go/xPaoNJMzbG

Answer 5

在 Bootstrap-5 中，有一些变化，之前的 margin-left:auto 是 ml-auto，现在改为 ms-auto，类似的，mr-auto 改为 me-auto。但是对于顶部和底部，它与引导程序的早期版本相同，即引导程序-5 之前的版本

了解更多详情visit docs

Answer 6

我正在使用 bootstrap@5.0.X 如果你在 2021 年被这个问题困扰，是因为类名发生了迁移和变化。

<块引用>

.ml-* 和 .mr-* 到 .ms-* 和 .me-*。

类似地，许多其他类名已更改。

检查迁移的链接

Bootstrap Migration link

ml-auto没有将导航栏链接推向右侧

6 个答案: