ブートストラップ4のナビゲーションバーにテキストを追加するにはどうすればよいですか？

Question

ログインしたユーザーのユーザー名をBootstrap 4 navbarのアプリケーションに表示しようとしています。しかし、それは他の要素との垂直方向の整列から表示されます。しかし、私はそれがmiddle-rightを表示したい、ザ・電子メールアドレスを結果

<nav class="navbar navbar-light bg-faded"> 

    <a class="navbar-brand" href="#">Brand Name</a> 

    <ul class="nav navbar-nav"> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Foo</a> 
     </li> 
    </ul> 

    <ul class="nav navbar-nav pull-xs-right"> 
     <li class="nav-item"> 
      <span>email@example.com</span> 
     </li> 
    </ul> 

</nav> 

top-rightが表示されます。

は、ここでの例です。

<ul class="nav navbar-nav"> 
    <li class="nav-item"> 
     <span>email@example.com</span> 
    </li> 
</ul> 

など1個のulタグを使用します：

<ul class="nav navbar-nav pull-xs-right"> 
    <li class="nav-item"> 
     <span>email@example.com</span> 
    </li> 
</ul> 

は次のようになります。あなたはとてもクラスpull-xs-rightを削除する必要が

Answer 1

<nav class="navbar navbar-light bg-faded"> 

    <a class="navbar-brand" href="#">Brand Name</a> 

    <ul class="nav navbar-nav"> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Foo</a> 
     </li> 
     <li class="nav-item"> 
      <span>email@example.com</span> 
     </li> 
    </ul> 

</nav> 

は、この情報がお役に立てば幸いです。この

<nav class="navbar navbar-light bg-faded"> 

    <a class="navbar-brand" href="#">Brand Name</a> 

    <ul class="nav navbar-nav"> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Foo</a> 
     </li> 
    </ul> 

    <ul class="nav navbar-nav pull-xs-right"> 
     <li class=" nav-item navbar-text"> 
      <span>email@example.com</span> 
     </li> 
    </ul> 

</nav> 

のようなリチウムへ

Answer 2

するTryナビゲーションバーテキストはhere

Answer 3

はスパンにクラス.nav-linkを追加して、そのように応じてその色のスタイルの例を参照してください。

ここにありますフィドルFiddle Demo

.navbar-light .navbar-nav span.nav-link, 
.navbar-light .navbar-nav span.nav-link:hover, 
.navbar-light .navbar-nav span.nav-link:focus{ 
    color:rgba(0,0,0,0.8); 
} 

<nav class="navbar navbar-light bg-faded"> 

    <a class="navbar-brand" href="#">Brand Name</a> 

    <ul class="nav navbar-nav"> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Foo</a> 
     </li> 
    </ul> 

    <ul class="nav navbar-nav pull-xs-right"> 
     <li class="nav-item"> 
      <span class="nav-link">email@example.com</span> 
     </li> 
    </ul> 

</nav> 

またはあなたのマークアップとスタイルあなたが

.navbar-nav span { 
    display: block; 
    padding-top: .425rem; 
    padding-bottom: .425rem; 
}