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

Question

我正在使用 reactstrap 并且一直在关注这个 link:

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

导航栏组件（以及许多其他组件）只有在按照设计使用方式使用它们时才会起作用。

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

如果你破坏了兄弟姐妹关系，它就不起作用了。

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

删除放在 navbar-toggler 周围的 div 和折叠组件，以使同级选择器按预期工作。

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

P.S。你似乎有把东西包装在不必要的 div 中的习惯。 container也被包裹在这样一个没用的div中。不要为某种 "esthetics" 添加不必要的代码。只添加代码，如果它确实做了一些事情，其他的都使用注释。

Answer 2

解释 ml-auto 的工作原理。

看来这已经在评论中解决了。我只是想添加一个解释，即 ml-auto 不起作用，因为它的 flexbox parent 需要是导航栏的 full-width。因此，也可以通过将 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 父元素 "shrinks" 默认情况下是子块元素。它与兄弟元素无关，并且在 flexbox 父元素中只有一个子元素时可以正常工作：https://www.codeply.com/go/xPaoNJMzbG

这是一个good article on how auto-margins work with flexbox

Answer 3

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

Answer 4

在Bootstrap-5中有一些变化，之前是ml-auto for margin-left:auto现在改为ms-auto，同样mr-auto改为me-auto。然而，对于顶部和底部，它与 bootstrap 的早期版本相同，即 bootstrap-5

之前的版本

了解更多详情visit docs

Answer 5

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

.ml-* and .mr-* to .ms-* and .me-*.

同样许多其他人 class 名称已更改。

Link 检查迁移

Bootstrap Migration link

Answer 6

从Bootstrap5 2021开始，spacing utilities的边名有一些变化

Margin Left 现在称为 Margin Start，因此使用 ms 而不是 ml
示例：将 margin-left 设置为自动：使用 ms-auto
与将边距设置为 3 类似：使用 ms-3 而不是 ml-3

您可以在官方 bootstrap 文档 BootStrap Spacing Utilities

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

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

ml-auto is not pushing navbar links to the right

css

flexbox

reactjs

bootstrap-4

reactstrap