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

Question

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

我尝试了几种与 flexbox 不同的组合，但都无法正确使用。这是我使用的最后一个代码组合，我认为它应该以这种方式工作，但我必须遗漏一些东西。

这里我有 Bootstrap Navbar 声明，然后在 NavBar 中我有一个 flex 容器。然后使用space-between 它应该将它们拆分为左右。我什至设置了flex-grow:1 试图让它拉伸视口的宽度，但它不起作用。

.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

将width: 100% 分配给nav__container，这样flexbox 将成为一个全宽 容器 - 参见下面的演示：

.nav__container {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<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>
                    
                        <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 2

只需将w-100 (width: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