ブートストラップ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ブロックであると思う：

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

のdivは常にブロック要素として表示され、それがのdivブロックの下に新しい行を開始します理由のthatsています。アイテムをリストタグの一部として配置すると、それが機能するはずです。たとえば：

<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>