Как добавить обычный текст в навигационную панель Bootstrap 4?

Question

Это, вероятно, очень просто, но ответ, похоже, ускользает от меня. Я пробовал несколько комбинаций, используя navbar-text, но большинство из них в конечном итоге помещают текст выше или ниже другого элемента navbar. Я хотел бы, чтобы текст находился слева от ссылки «Вход».

Вот что я сейчас:

<nav class="navbar navbar-fixed-top navbar-dark bg-inverse"> 
    <a class="navbar-brand" href="#">Sample App</a> 
    <ul class="nav navbar-nav"> 
     <li class="nav-item active"> 
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">About</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Contact</a> 
     </li> 
    </ul> 
    <div class="nav navbar-nav pull-md-right"> 
     <div class="nav nav-item"> 
      <p class="navbar-text">Signed in as User#1234</p> 
     </div> 
     <ul class="nav navbar-nav"> 
      <li class="nav-item"> 
       <a class="nav-link" href="#">Sign In</a> 
      </li> 
     </ul> 
    </div> 
</nav> 

Это заканчивает тем, как это:

Большое спасибо заранее.

Answer 1

Я думаю, что это из-за сОн блока здесь:

<div class="nav nav-item"> 
    <p class="navbar-text">Signed in as User#1234</p> 
</div> 

ДИВ всегда отображаются как блочный элемент, и вот причина, почему она начнет новую строку ниже блока DIV. Если вы поместите элемент как часть тега списка, он должен работать. Например:

<div class="nav navbar-nav pull-md-right"> 
    <ul class="nav navbar-nav"> 
     <li class="nav-item"> 
      <p class="navbar-text">Signed in as User#1234</p> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Sign In</a> 
     </li> 
    </ul> 
</div>