ナビゲーションバーのBoostrapインラインタブ？

Question

私はcodepenに少し運動を作業とブートストラップを使用してナビゲーションバーのタブのスタイルを設定しようとしているが、私はそれが各行の項目になってしまったサイト上の元のコードを使用したり

class="list-inline" 

を追加されたときにしていますlike this。

誰もその理由を説明できますか？私はブーストラップ4を使用しています。私のコードは

<nav class="navbar navbar-default"> 
    <div class="navbar-header"> 
     <a href="#" class="navbar-brand">Brand</a> 
    </div> 
    <ul class="list-inline"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Menu 1</a></li> 
     <li><a href="#">Menu 2</a></li> 
     <li><a href="#">Menu 3</a></li> 
    </ul> 
</nav> 

Answer 1

です。リストインラインアイテムクラスをliアイテムにも使用する必要があります。

https://jsfiddle.net/pr6t58wL/

<nav class="navbar navbar-default"> 
    <div class="navbar-header"> 
    <a href="#" class="navbar-brand">Brand</a> 
    </div> 
    <ul class="list-inline"> 
    <li class="list-inline-item"><a href="#">Home</a></li> 
    <li class="list-inline-item"><a href="#">Menu 1</a></li> 
    <li class="list-inline-item"><a href="#">Menu 2</a></li> 
    <li class="list-inline-item"><a href="#">Menu 3</a></li> 
    </ul> 
</nav> 

以下のフィドルを見ます