引导程序的 mr-auto 类不能正常工作？答案

【问题标题】：mr-auto class of bootstrap not working as excepted?引导程序的 mr-auto 类不能正常工作？
【发布时间】：2021-08-13 17:59:23
【问题描述】：

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav **mr-auto**">
                        <li class="nav-item active">
                            <a class="nav-link" href="homepage.aspx">Home</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="#">About Us</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Terms</a>
                        </li>

                    </ul>

                    <ul class="navbar-nav">
                        <li class="nav-item active">
                            <asp:LinkButton class="nav-link" ID="LinkButton4" runat="server">View Books</asp:LinkButton>
                        </li>
                        
                        <li class="nav-item active">
                            <asp:LinkButton class="nav-link" ID="LinkButton1" runat="server">User Login</asp:LinkButton>
                        </li>
                        <li class="nav-item active">
                            <asp:LinkButton class="nav-link" ID="LinkButton2" runat="server">Sign Up</asp:LinkButton>
                        </li>
                        <li class="nav-item active">
                            <asp:LinkButton class="nav-link" ID="LinkButton3" runat="server">Logout</asp:LinkButton>
                        </li>

                        <li class="nav-item active">
                            <asp:LinkButton class="nav-link" ID="LinkButton7" runat="server">Hello user</asp:LinkButton>

                        </li>
                    </ul>
                </div>

See the navigation there is some margin left between the logo and the buttons

我从 bootstrap 导入了这段代码，但第一个没有完全左对齐，第二个右对齐到右侧see I have inspected this but it looks fine to me

【问题讨论】：

请确认Bootstrap的版本

标签： c# asp.net asp.net-mvc-4 bootstrap-4

【解决方案1】：

根据the documentation of Flex of Bootstrap 4：

应用显示实用程序来创建 flexbox 容器并将直接子元素转换为 flex 项。 Flex 容器和项目可以通过额外的 flex 属性进一步修改。

要启用此行为，您需要将以下d-flex 类之一添加到容器元素，在您的情况下是根div 元素：

  <div class="collapse navbar-collapse d-flex" id="navbarSupportedContent">

有效的选项是：

.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex

【讨论】：