Блог

Я создал навигационную панель с помощью bootstrap. Я хочу, чтобы две кнопки были выровнены по правому краю, но независимо от того, к чему я применяю justify-content-end , это не работает.

Я понимаю, что d-flex необходимо будет применить к контейнеру, а затем justify-content-end к элементам по мере необходимости, но используя эту логику (применяя ее к div панели навигации), это не работает.

вот codepen: https://codepen.io/MH092/pen/xxXwzVY

 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand pr-5" href="#">40k QuickLore</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
        aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse d-flex pl-1" id="navbarNavDropdown">
        <ul class="navbar-nav">
            <li class=" nav-item">
                <a class="nav-link pr-5" href="#">WTF is 40k</a>
            </li>

            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                    Imperium
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                    Xenos
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                    Misc
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
                <nav class="navbar navbar-light">
                    <form class="form-inline">
                        <button class="btn btn-outline-success" type="button">RIGHT ME</button>
                        <button class="btn btn-outline-success" type="button">RIGHT ME</button>
                    </form>
                </nav>
 

Вы можете добавить display: flex; к себе класс nav-item, и ваши «правильные» div будут справа.

Но если вы хотите, чтобы они были в самом правом углу, вам нужно немного изменить структуру DOM, потому что «right me» находятся в li теге, который не является их правильным местом.

Я думаю, у вас должна быть такая структура:

а затем добавьте justify-content: space-between; к своему родительскому

Вам не хватает нескольких закрывающих </li> тегов. Я бы также предложил не включать a nav внутри вашего nav . Вот пересмотренный codepen с изменениями только для вашего html: codepen.io/maggiecody/pen/poWjZmG .