twitter-bootstrap - 使用 Bootstrap 4 和 Flexbox 定位导航栏按钮不起作用？

Question

仍在尝试 Flexbox，但在尝试使用导航栏时遇到问题。我正在寻找的是将网站标题放在最左侧，然后将按钮放在最右侧。

我尝试了几种不同的 Flexbox 组合，但未能正确获得它。这是我使用的最后一个代码组合，我认为它应该以这种方式工作，但我一定错过了一些东西。

这里我有 Bootstrap Navbar 声明，然后在 NavBar 内我有一个 Flex 容器。然后使用 space- Between 应该将它们分成左右两部分。我什至设置了 flex-grow:1 来尝试让它拉伸(stretch)视口(viewport)的宽度，但它不起作用。

.nav__container {
    display: flex;
    justify-content: space-between;

    &__title {
        flex-grow: 1;
    }

    &__buttons {
        flex-grow: 1;
    }
}



<nav class="navbar navbar-expand-md navbar-dark bg-primary navbar-static-top py-0 ">
    <div class="nav__container">
        <div class="nav__title">
            <a class="navbar-brand" href="@Url.Action("Index","Home")">Job Transfers</a>
        </div>

        <div class="nav__buttons">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="@Url.Action("Index","Home")">My Transfer Requests</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="@Url.Action("ViewTransferList","Transfer")">View Transfer Lists</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="@Url.Action("BidRequests","Bid")">My Bid Requests</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="@Url.Action("BidList","Bid")">Bid Postings</a>
                    </li>
                    @if ((bool)Session["IsAdmin"])
                    {
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Admin
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="@Url.Action("ViewBidList","Bid")">Employee Bids</a>
                                <a class="dropdown-item" href="@Url.Action("ViewRequestHistory","Transfer")">Request History</a>
                                <a class="dropdown-item" href="@Url.Action("ViewRecallRights","Transfer")">Recall Rights</a>
                            </div>
                        </li>
                    }

                </ul>
            </div>
        </div>
    </div>
</nav>

这就是我得到的。

Answer 1

只需将 w-100 (宽度:100%)添加到 nav_container 中即可。此外，您不需要额外的 CSS，您可以使用 d-flex 进行 display:flex 和 ml-auto 来保留按钮/链接向右。还有other flexbox utils .

<nav class="navbar navbar-expand-md navbar-dark bg-primary navbar-static-top py-0 ">
    <div class="nav__container w-100">
        <div class="nav__title">
            <a class="navbar-brand" href="">Job Transfers</a>
        </div>
        <div class="nav__buttons ml-auto">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="">My Transfer Requests</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="">View Transfer Lists</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="">My Bid Requests</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="">Bid Postings</a>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Admin
                            </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="">Employee Bids</a>
                            <a class="dropdown-item" href="">Request History</a>
                            <a class="dropdown-item" href="">Recall Rights</a>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
    </div>
</nav>

https://www.codeply.com/go/E2GeQvBUID

另请参阅:Bootstrap NavBar with left, center or right aligned items