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

Posted 2023-03-06

技术标签:

【中文标题】ml-auto 没有将导航栏链接推到右侧【英文标题】：ml-auto is not pushing navbar links to the right 【发布时间】：2018-08-07 22:22:30 【问题描述】：

我正在使用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 在其中一个而不是另一个中工作。

【问题讨论】：

从div 解开navbar-toggler 和.navbar-collapse...。看起来您在div 之后使用了额外的div... 【参考方案1】：

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

【讨论】：

这值得更多的信用。在 react 的引导页面下，没有提到任何关于 ms-auto 的内容。 ml-auto 就是它给我的一切，以及这里的所有其他帖子。该死的家伙，你是一个传奇。这对我有用。我正在使用 react-bootstrap 并使用 yarn add bootstrap 安装了引导程序，它安装了最新的 v5.0。重新安装引导程序（yarn add bootstrap@4.6.0），现在工作正常。如果使用 bootstrap 5 应该是公认的答案是的，这很成功。谢谢，你拯救了我的一天。同意上述cmets。【参考方案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中了解有关边距和填充的新边名的更多信息

【讨论】：

【参考方案3】：

导航栏组件（和许多其他组件）只有在您按照设计使用的方式使用它们时才能工作。

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

如果您破坏该兄弟关系，它将不起作用。

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

删除您放置在导航栏切换器和折叠组件周围的 div，以使同级选择器按预期工作。

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

附：您似乎习惯于将东西包装在不必要的 div 中。 container 也被包裹在这样一个无用的 div 中。不要为某种“美学”添加不必要的代码。仅在实际执行某些操作时才添加代码，并将 cmets 用于其他所有操作。

【讨论】：

!important 由 Bootstrap 添加。他们没有制定那些 CSS 规则。【参考方案4】：

解释ml-auto 的工作原理。

看来这已经在 cmets 中解决了。我只是想添加一个解释，ml-auto 不起作用，因为它的 flexbox parent 需要是导航栏的全宽。所以，也可以通过在额外的 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

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

【讨论】：

我尝试将 w-100 添加到父元素（在我的情况下为行），但没有任何区别。当我使用 ml-auto 时，按钮仍然没有正确对齐。但是，添加类 text-right 有效，并且按钮正确对齐。【参考方案5】：

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

更多详情visit docs

【讨论】：

是的，如果您使用的是 Bootstrap 版本 5，这个答案是正确的【参考方案6】：

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