Разверните элементы панели навигации, чтобы они занимали всю ширину

Question

Мне нужно иметь панель навигации с элементами справа и слева.

У меня это работает, но элементы слева (регистрация, вход в систему слева) не расположенык самой левой.

Как мне добиться чего-то похожего на то, что есть на этой странице?

https://www.stickermule.com/

Желаемый результат:

Что у меня есть:

Код:

<nav class="navbar navbar-expand-md navbar-dark fixed-top navbar-bg">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
            aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">


            <ul class="navbar-nav mr-auto">

                <li class="nav-item active">
                    <a class="nav-link" href="#">Stickers <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">Etiquetas</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">Magnetos</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">Pines</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">Pines</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">Empaques</a>
                </li>
            </ul>



            <ul class="navbar-nav mr-auto navbar-right">
                <li class="nav-item active">
                    <span class="glyphicon glyphicon-globe"></span>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">LogIn</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">Registro</a>
                </li>
            </ul>


    </div>
</nav>

Бонус:

Я пытаюсь сделать значок глификона в качестве элемента навигации, но он не отображается на панели навигации.почему?

Answer 1

1. Взгляните на документацию Bootstrap 4 на панели навигации , так как вы использовали неправильные имена классов.Проверьте остальное для лучшего понимания возможностей начальной загрузки.Bootstrap 4 во многом отличается от Bootstrap 3. Вы использовали некоторые классы, которые не работают в новой версии.Итак, еще раз: проверьте документы:)
2. Помните, что только 1 nav-item элемент также должен иметь класс active.

О значках :

Bootstrap по умолчанию не включает библиотеку значков, но у нас есть несколько рекомендаций, из которых вы можете выбрать.Хотя большинство наборов иконок включают несколько форматов файлов, мы предпочитаем реализации SVG для их улучшенной доступности и векторной поддержки.

Здесь я использовал FontAwsome

<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-expand-md fixed-top bg-dark navbar-dark">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
            aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">


            <ul class="navbar-nav">

                <li class="nav-item active">
                    <a class="nav-link" href="#">Stickers <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Etiquetas</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Magnetos</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Pines</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Pines</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Empaques</a>
                </li>
            </ul>



            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link"><i class="fas fa-shopping-cart"></i></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">LogIn</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Registro</a>
                </li>
            </ul>


    </div>
</nav>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>