Как добавить текст между логотипом и пунктами меню с помощью начальной загрузки?

Question

Я пробую пару способов, но не очень удачно. Ниже приведена часть кода.

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#my-navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><img src="img/logo.svg">Demo</a>
    </div>
    <div class="collapse navbar-collapse" id="my-navbar">
      <ul class="nav navbar-nav navbar-right">

По сути, у меня есть логотип с левой стороны и несколько пунктов меню справа. Между логотипом и меню есть место, куда я хочу вставить текст. Текст должен быть выровнен вдоль одной горизонтальной линии с логотипом и меню. До сих пор я не нашел удовлетворительного способа сделать это.

Answer 1

Вы не упомянули расположение текста на маленьких экранах.Я предполагаю, что вы хотите, чтобы текст был в верхней части #my-navbar.

. Мой подход состоит в том, чтобы создать еще один .navbar-collapse, содержащий текст, и изменить navbar-toggler на целевой .navbar-collapse. * 1007.*

Структура HTML (Bootstrap 4.1)

<nav class="navbar">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Demo</a>
            <button class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse">
            <div class="navbar-text">
                Navbar text
            </div>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav">
                <li class="nav-item active"></li>
                <li class="nav-item"></li>
                <li class="nav-item"></li>
                ...
            </ul>
        </div>
    </div>
</nav>

На небольших экранах эта структура уже идеально все выравнивает, потому что bootstrap устанавливает flex-basis: 100%; на .navbar-collapse, за исключением того, что вам нужно установить display:flex;на .navbar-header, чтобы брендирование находилось слева, а переключатель - справа:

.navbar-header {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    flex-grow: 1;
}

На больших экранах, поскольку bootstrap устанавливает justify-content:space-between; уже на .container-fluid, .navbar-header, первый .navbar-collapse, содержащий текст, и второй .navbar-collapse, содержащий меню, уже находятся в правильном положении.Единственное, что вам нужно сделать, это выровнять текст по центру, а меню по правому краю.

Вы можете создать свой собственный класс CSS и стиль, который вы можете самостоятельно.Или вы можете просто использовать bootstrap служебный класс justify-content-center и justify-content-end:

        <div class="collapse navbar-collapse justify-content-center">
            <div class="navbar-text">
                Navbar text
            </div>
        </div>
        <div class="collapse navbar-collapse justify-content-end">
            <ul class="navbar-nav">
                <li class="nav-item active"></li>
                <li class="nav-item"></li>
                <li class="nav-item"></li>
                ...
            </ul>
        </div>

скрипку: https://jsfiddle.net/aq9Laaew/175839/