Bootstrap 4 навбар всегда на 2 строчки - PullRequest
Новая
       8

Bootstrap 4 навбар всегда на 2 строчки

0 голосов
/ 03 июля 2018

Я пытаюсь решить проблему, которая кажется очевидной, Я использовал стандартный код Bootstrap с Bootstrap 4.1, но он не ведет себя так, как хотел (и, как я видел это в документации)

Моя цель - воспроизвести это (без единой строки) https://getbootstrap.com/docs/4.0/components/navbar/#nav enter image description here

Но моя навигационная панель заканчивается в 2 строки, как только она не свернута, см. Здесь:

enter image description here увидеть это здесь на jsfiddle https://jsfiddle.net/acourdavault/3jnfgk5z/1/#&togetherjs=D7vbBSPwLI

Код здесь: 

    <html>

<head>
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
        crossorigin="anonymous">
</head>

<body>
    <header>
        <!-- Image and text -->
        <nav class="navbar-expand-lg navbar-light bg-light sticky-top">
            <a class="navbar-brand" href="#">
                Brand
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup"
                aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <div class="navbar-nav">
                    <a class="nav-item nav-link active" href="#">Home
                        <span class="sr-only">(current)</span>
                    </a>
                    <a class="nav-item nav-link" href="#">Notifications</a>
                    <a class="nav-item nav-link" href="#">Settings</a>
                    <a class="nav-item nav-link" href="#">Help</a>
                </div>
            </div>
        </nav>
    </header>
    <div id="container">
    </div>
    <footer></footer>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
        crossorigin="anonymous"></script>
</body>

</html>

Обход

Я могу заставить его работать, если вместо

nav: - nav-brand - toggler - navbar-collapse: - navbar-nav

Я делаю

nav: - toggler - navbar-collapse: - nav-brand - navbar-nav

но это не то, что говорит документ из загрузочного ремешка Также переключатель все еще не выровнен справа, который он должен по умолчанию

1 Ответ

0 голосов
/ 04 июля 2018

FYI,

ошибка в том, что в теге отсутствует основной класс navbar,

100% моя вина, без комментариев.

...