Bootstrap 4 навигационная панель / меню оставляют запись видимой, когда она свернута

Question

Этот вопрос похож на этот , но он предназначен для Bootstrap 4.

Я не могу добавить правосторонние записи на панель навигации BS4, которая остается видимой как в свернутом, так и не свернутом состоянии Я провел полный рабочий день без успеха.

Это моя цель:

Вот мой текущий код (работает только тогда, когда нет рухнул):

Answer 1

Поскольку вы используете Bootstrap 4, этот ответ больше соответствует вашему вопросу: { ссылка } (см. Последнюю часть)

Часть, которую вы всегда хотите сохранить видимой, должна быть отделена от любой из складных частей. Затем используйте классы order-* для позиционирования элементов по желанию:

Демо: https://codeply.com/p/ylDhhZtpiH

https://codeply.com/p/ylDhhZtpiH

Answer 2

Я сделал небольшое важное исправление к хорошему ответу от Зима .

Я исправил «всегда видимую» часть меню, так как он не перекрывал все меню, когда оно было свернулся.

Добавление пользовательского класса .navbar-always-overlapped исправило его.

<nav class="navbar navbar-light navbar-expand-lg border-bottom mainmenu sticky-top justify-content-start">
    <!-- same code from Zim here>
    ...

    <!-- always visible portion. Note the 'navbar-always-overlapped' -->
    <ul class="navbar-nav navbar-always-overlapped order-1 order-lg-last ml-auto">
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownLang" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-flag it" title="Italiano"></i>
                <span class="d-inline d-lg-none">Italiano</span>
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownLang">
                <a class="dropdown-item" href="#">
                    <i class="fas fa-flag-usa gb" aria-hidden="true"></i>
                    <span class="">English</span>
                </a>
            </div>
        </li>
    </ul>
    <!-- 2nd collapse menu -->
    <div class="collapse navbar-collapse collapsable flex-grow-0 order-last">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="/Account/Login"><i class="fa fa-sign-in"></i> Log in</a>
            </li>
        </ul>
    </div>
</nav>

и код для .navbar-always-overlapped:

.navbar-always-overlapped .dropdown-menu {
    position: absolute !important;
}

См. https://codeply.com/p/9deLYTGblZ

Answer 3

Вы должны попробовать использовать эту ссылку: https://getbootstrap.com/docs/4.4/utilities/flex/#justify -content