nav-brandとログインボタンの両方をnavbarの同じ行にする方法

Question

私は一番上に固定されたnavbarを持っています。左には会社のロゴと名前が一緒になければなりません。右側には、ログインボタンが必要です。

私はウェブ上の多くの例を見てきましたが、それらのすべては、ウェブページがモバイルにあるときにnavbarに表示すべきではないnavbar-toggler-rightを使用します。

これは私がこれまで行うことができました私のものです：私は私が望む結果を達成していない、

<nav class="navbar fixed-top navbar-light bg-faded"> 
    <a class="navbar-brand d-inline-flex" href="#"> 
     <img src="http://placehold.it/90x90" width="30" height="30" class="d-inline-block align-top" alt="Company's logo"> 
     Company's name 
    </a> 
    <div class="navbar-nav"> 
     <a class="nav-item"> 
      <button type="button" class="btn btn-primary"> Log In</button> 
     </a> 
    </div> 
</nav> 

しかし。 navbar-brandはすべての幅をとり、次の行にログインボタンが表示されます。

Webpage Preview

どのように私は私が望む結果を達成することができますか？私は縦に積み重ねからナビゲーションバーを防ぐために、ブートストラップ4アルファ6

Answer 1

使用navbar-toggleable-xlを使用しています。デフォルトでは

http://www.codeply.com/go/oJ1GetCfsL

<nav class="navbar fixed-top navbar-toggleable-xl navbar-light bg-faded"> 
    <a class="navbar-brand" href="#"> 
     <img src="http://placehold.it/90x90" width="30" height="30" class="d-inline-block align-top" alt="Company's logo"> 
     Company's name 
    </a> 
    <div class="navbar-nav ml-auto"> 
     <a class="nav-item"> 
      <button type="button" class="btn btn-primary"> Log In</button> 
     </a> 
    </div> 
</nav> 

navbar-toggleable-*クラスのいずれかによって上書きされない限り、ナビゲーションバーは、（垂直に積み重ね）常に携帯です。 navbarを常に水平にしたいので、navbar-toggleable-xlクラスを使用してください。

Answer 2

<nav class="navbar fixed-top navbar-light bg-faded"> 
 
     <a class="navbar-brand d-inline-flex" href="#"> 
 
      <img src="http://placehold.it/90x90" width="30" height="30" class="d-inline-block align-top" alt="Company's logo"> 
 
      Company's name 
 
     </a> 
 
     <div class="navbar-nav"> 
 
      <a href="#" class="btn btn-primary nav-item pull-right" role="button">Log In</a> 
 
       </div> 
 
    </nav>