Невозможно обосновать содержимое в Bootstrap Navbar

Я хочу добавить навигацию в свой html-файл и попытался использовать Bootstrap для панели навигации. Но я не могу оправдать содержание, чтобы добавить пробел между моими ссылками. Я нашел пример, который сделал бы это для меня, но когда я добавляю код в свой html-файл, он ведет себя очень странно, и навигация не работает!

Это ссылка, которая показывает панель навигации с выравниванием содержимого между: https://www.codeply.com/p/T2PwT6z0Bn

Это мой код, который не работает должным образом. Может кто-нибудь сказать мне, что не так?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>News</title>
</head>
<body>
      <div class="container">
            <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
                <div class="container">
                    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar10">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <span class="navbar-brand hidden-lg-up">Brand</span>
                    <div class="navbar-collapse collapse" id="navbar10">
                        <ul class="navbar-nav nav-fill w-100 align-items-start">
                            <li class="nav-item">
                                <a class="nav-link" href="#">Justi</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Fied</a>
                            </li>
                            <li class="nav-item hidden-md-down">
                                <h5 class="my-0"><a class="nav-link" href="#">Brand</a></h5>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Nav</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Bar</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
            <div class="container-fluid">
                <br>
                <h5>Nav fill example</h5>
                <ul class="nav nav-pills nav-fill">
                    <li class="nav-item">
                        <a class="nav-link active" href="#subscribed" data-toggle="tab">Mes inscriptions</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#eventPassed" data-toggle="tab">Événements passés</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#eventNow" data-toggle="tab">Événements en cours</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#eventIncoming" data-toggle="tab">Événements futurs</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#eventCreation" data-toggle="tab">Créer un événement</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#eventOwn" data-toggle="tab">Mes événements</a>
                    </li>
                </ul>
                <br>
                <h5>Nav justified example</h5>
                <ul class="nav nav-pills nav-justified">
                    <li class="nav-item">
                        <a class="nav-link active" href="#subscribed" data-toggle="tab">Mes inscriptions</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#eventPassed" data-toggle="tab">Événements passés</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#eventNow" data-toggle="tab">Événements en cours</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#eventIncoming" data-toggle="tab">Événements futurs</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#eventCreation" data-toggle="tab">Créer un événement</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#eventOwn" data-toggle="tab">Mes événements</a>
                    </li>
                </ul>
            </div>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Правильный вывод должен выглядеть следующим образом (обратите внимание на черный фон со ссылками навигации):

А вот что получаю при просмотре в Chrome (черного фона нет и Марка далеко в конце):

bootstrap-4 navbar justify

J21 B 16.01.2020 источник

Ответы (1)

arrow_upward
1
arrow_downward

Я думаю, что это как-то связано с версией, используемой в вашем примере. Глядя на него, я заметил, что он использует Bootstrap 4.0.0-alpha.6, а вы используете 4.4.1, поэтому есть вероятность, что визуальный аспект или функциональность были изменены.

Таким образом, вы можете использовать это для работы с 4.4.1: docs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>News</title>
</head>
<body>
    <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse nav nav-pills nav-justified">
      <a class="nav-item nav-link active" href="#">Active</a>
      <a class="nav-item nav-link" href="#">Link</a>
      <a class="nav-item nav-link" href="#">Link</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </nav>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Или вы можете заменить свою таблицу стилей и js, чтобы они соответствовали версии примера, и это будет выглядеть так:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" crossorigin="anonymous">
    <title>News</title>
</head>
<body>
      <div class="container">
            <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
                <div class="container">
                    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar10">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <span class="navbar-brand hidden-lg-up">Brand</span>
                    <div class="navbar-collapse collapse" id="navbar10">
                        <ul class="navbar-nav nav-fill w-100 align-items-start">
                            <li class="nav-item">
                                <a class="nav-link" href="#">Justi</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Fied</a>
                            </li>
                            <li class="nav-item hidden-md-down">
                                <h5 class="my-0"><a class="nav-link" href="#">Brand</a></h5>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Nav</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Bar</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
            <div class="container-fluid">
                <br>
                <h5>Nav fill example</h5>
                <ul class="nav nav-pills nav-fill">
                    <li class="nav-item">
                        <a class="nav-link active" href="#subscribed" data-toggle="tab">Mes inscriptions</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#eventPassed" data-toggle="tab">Événements passés</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#eventNow" data-toggle="tab">Événements en cours</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#eventIncoming" data-toggle="tab">Événements futurs</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#eventCreation" data-toggle="tab">Créer un événement</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#eventOwn" data-toggle="tab">Mes événements</a>
                    </li>
                </ul>
                <br>
                <h5>Nav justified example</h5>
                <ul class="nav nav-pills nav-justified">
                    <li class="nav-item">
                        <a class="nav-link active" href="#subscribed" data-toggle="tab">Mes inscriptions</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#eventPassed" data-toggle="tab">Événements passés</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#eventNow" data-toggle="tab">Événements en cours</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#eventIncoming" data-toggle="tab">Événements futurs</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#eventCreation" data-toggle="tab">Créer un événement</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#eventOwn" data-toggle="tab">Mes événements</a>
                    </li>
                </ul>
            </div>          
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>
</html>

Надеюсь, это поможет! :)

ERM 16.01.2020

Невозможно обосновать содержимое в Bootstrap Navbar

Ответы (1)

Похожие вопросы