16

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

4

6 回答 6

98

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

于 2021-01-04T11:50:31.850 回答
18

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

  • Margin Left 现在称为 Margin Start，因此使用ms而不是ml

  • 示例：将 margin-left 设置为 auto ：使用ms-auto

  • 同样，将 margin left 设置为 3 ：使用ms-3而不是ml-3

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

于 2021-05-20T08:39:57.703 回答
10

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

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

如果您破坏这种兄弟关系，它就不起作用。

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

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

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

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

于 2018-02-28T07:00:55.123 回答
8

解释如何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 一起使用的好文章

于 2018-02-28T11:58:54.307 回答
4

我用的是 bootstrap@5.0.X 如果你在 2021 年遇到这个问题，那是因为有迁移和类名的变化。

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

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

检查迁移的链接

引导迁移链接

于 2021-05-07T19:58:42.693 回答
4

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

有关更多详细信息，请访问文档

于 2021-02-20T07:35:50.837 回答