Позиционирование кнопок Navbar с Bootstrap 4 и Flexbox не работает?

Question

Я все еще попадаю во Flexbox, но у меня возникают проблемы при попытке работать с Navbar. То, что я ищу, - это поместить название сайта в крайнее левое положение, а затем кнопки в крайнее правое положение.

Я пробовал несколько разных комбинаций с 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

Просто добавьте w-100 (ширина: 100%) в nav_container.Также вам не нужен дополнительный CSS, который вы можете использовать d-flex для display:flex и ml-auto, чтобы держать кнопки / ссылки справа.Также другие утилиты flexbox .

<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

См. Также: Начальная загрузка NavBar с выровненными по левому, центральному или правому краю элементами

Answer 2

Дайте от 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>