Bootstrap 4 我可以´；我不明白为什么我的mr auto不工作（使用引导）

在这个导航栏中的“主页”之前，我想把我所有的内容都放在右边。我正在使用mr auto，但它不工作，有什么建议吗

<header class="header_area">
    <div class="main-menu">
        <nav class="navbar navbar-expand-lg navbar-light">
            <div class="container-fluid">
                <a class="navbar-brand" href="#"> <img src="./img/logo.png" alt="logo"> </a>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <div class="mr-auto"></div>
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">Home</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</header>

我想你希望

家在左边，其他一切都在右边。
mr auto
和
ml auto
是flexbox的一部分。因此，将
d-flex
添加到容器中

<header class="header_area">
  <div class="main-menu">
    <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container-fluid d-flex">
            <a class="navbar-brand" href="#"> <img src="./img/logo.png" alt="logo"> </a>
            <div class="collapse navbar-collapse " id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                </ul>
            </div>
            <div class="mr-auto">Right side</div>
        </div>
    </nav>
  </div>
</header>






右侧
在大屏幕上的代码下方运行。主页之后的所有内容都向右对齐。我想你想要这个。如果这不是你的答案，请在评论部分告诉我











“之前”和“向右”是矛盾的。从左到右阅读，“before”应该在家的左边，而不是右边。您想要哪个？有点误导，因为
margin:auto
不限于flexbox（请参阅），但在其他方面很好。@ConnorLow同意。我应该提到我的答案是针对bootstrap的。
ml auto
和
mr auto
实用程序类在flexbox布局中具有依赖性。下面是bootstrap的创建者：为了澄清，
mr auto
只设置了
右边距：auto！重要的。我不知道他在说什么。这并不局限于
display:flex；它可以用于大多数固定宽度的父级。