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一个人而不是另一个人的工作.

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工作原理的说明。

看来这已经在评论中解决了。我只是想添加一个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 父级默认情况下“缩小”子块元素的方式。它与兄弟元素无关，并且在 flexbox 父元素中只有一个孩子可以正常工作：https ://www.codeply.com/go/xPaoNJMzbG

这是一篇关于自动边距如何与 flexbox 配合使用的好文章

Answer 4

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

例如,ml-auto适用于兄弟元素.

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

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

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

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

PS你似乎习惯用不必要的div包装东西.在container也被包裹在这样的无用的div.不要为某种"美学"添加不必要的代码.只有在实际执行某些操作时添加代码并对其他所有内容使用注释.