Bootstrap justify-content-end не работает должным образом

Question

Проблема: Класс justify-content-end не работает должным образом в navbar при использовании Bootstrap 4.

Пример: я пытаюсь начать использовать css как Я трачу много времени на написание CSS. Тем не менее, я начал пытаться почувствовать это без написания каких-либо пользовательских CSS. Я пытаюсь создать navbar и скопировал следующий код из bootstrap документов:

<nav class="navbar navbar-expand-lg navbar-light bg-light col-12">
    <ul class="nav justify-content-end">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
        </li>
    </ul>
</nav>

Вы заметите, что класс justify-content-end добавлен к navbar. При проверке devtools я также вижу стили, которые применяются с этим классом, поэтому я знаю, что они применяются. Тем не менее, список nav-links остается слева, вот так.

Однако на документах тот же код выглядит примерно так.

Есть что-то, чего мне не хватает?

Answer 1

Класс должен быть применен к родительскому элементу, который является <nav>

Редактировать: Поскольку внутри nav имеется больше содержимого, класс justify-content-end не будет работать как задумано. Вам нужно использовать ml-auto

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-expand-lg navbar-light bg-light col-12">
    <h1>H1 tag</h1>
    <ul class="nav ml-auto">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
        </li>
    </ul>
</nav>

Answer 2

Если вы пытаетесь выровнять nav на правом конце navbar, это будет:

<nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-end">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
        </li>
    </ul>
</nav>

https://codeply.com/p/u2Xl8bTym0

Answer 3

Добавить пользовательский css для .navbar. .navbar{width: 100%;}. И удалите justify-content-end и добавьте ml-auto.

Bootstrap 4 Разметка navbar будет такой:

<div class="container-fluid main-menu">
    <div class="row">
        <div class="container">
            <div class="row">
                <nav class="navbar navbar-expand-lg">
                    <a class="navbar-brand" href="javascript:void(0);">
                        Logo
                    </a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>

                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ml-auto">
                            <li class="nav-item active">
                                <a class="nav-link" href="javascript:void(0);">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="javascript:void(0);">About</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="javascript:void(0);">Our Product</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="javascript:void(0);">Contact Us</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</div>

Вот CodePen .

Answer 4

Попробуйте это:

  <nav class="navbar navbar-expand-lg navbar-light bg-light col-12">
        <div class="col-4">

        </div>
        <div class="col-4">

        </div>
        <div class="col-4">
            <ul class="nav">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Active</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Disabled</a>
                </li>
            </ul>
        </div>
    </nav>