Question

我正在尝试使用Bootstrap进行堆叠式导航，但是品牌/徽标所在的第一行需要同时包含左右对齐的元素。

由于我需要使用flex-column进行多行导航，但是ml-auto和mr-auto类不允许内联定位，因此我的元素在水平方向上垂直居中，我该如何解决这个问题？

这是我的代码...这是一个Django模板，但是您应该可以了解我遇到的样式问题的要点：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>


<!-- js -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="navbar-toggler-right">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
                aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">

            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse flex-column" id="navbar">
        
        <ul class="navbar-nav mr-auto">
            <a class="navbar-brand" href="#"><img id="logo" alt="Logo" src='https://exactestate.sfo2.digitaloceanspaces.com/static/images/logo_white.png'>
            </a>
        </ul>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item dropdown mr-auto">
                <a class="nav-link dropdown-toggle" href="#"
                   id="navDropdown" role="button"
                   data-toggle="dropdown" aria-haspopup="true"
                   aria-expanded="false">
                    <i class="fas fa-user" style="color: white"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navDropdown">
                    <a class="dropdown-item" href=""><i
                            class="far fa-sign-out-alt"></i> Logout</a>
                </div>
            </li>
        </ul>

        <ul class="navbar-nav mr-auto">
           
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navDropdown" role="button" data-toggle="dropdown">
                    <i class="fas fa-users" style="color:white;"></i> Users
                </a>
                <div class="dropdown-menu" aria-labelledby="navDropdown">
                    <a class="dropdown-item" href=""><i
                            class="far fa-user-plus"></i> Register User</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href=""><i
                            class="fas fa-users"></i> Users</a>
                </div>
            </li>
            
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">
                    <i class="fa fa-book" style="color:white;"></i> Applications
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="">
                        <i class="fas fa-file-plus"></i> New Application</a>

                    <a class="dropdown-item" href="">
                        <i class="fas fa-cabinet-filing"></i> Existing Applications</a>

                    <div class="dropdown-divider"></div>

                    <a class="dropdown-item"
                       href="">
                        <i class="far fa-ballot-check"></i> Management Processing</a>
                    <a class="dropdown-item"
                       href="">
                        <i class="fas fa-ballot-check"></i> Compliance Processing</a>

                    <div class="dropdown-divider"></div>

                    <a class="dropdown-item"
                       href="">
                        <i class="fa fa-book"></i> Application Dashboard and Preleasing</a>
                </div>
            </li>

        </ul>

    </div>
</nav>

Answer 1

不确定是不是您想要的，但是请尝试下面的代码段，我删除了ml-auto / mr-auto帮助器，并为整个菜单添加了一个新的flex div包装器，我使用了{{1} }帮手将所有内容居中，然后我手动重新排列了justify-content-center项的顺序（将徽标放在中间，将一个导航栏放在左侧，将另一个导航栏放在右侧）。

您可以在此link上了解有关柔韧性定位的更多信息。

div

重叠ml-auto和mr-auto

1 个答案: