Comment faire à la fois une marque de navigation et un bouton de connexion dans la même barre dans une barre de navigation

Question

J'ai une barre de navigation qui est fixée en haut. Sur la gauche, il doit y avoir le logo et le nom de l'entreprise ensemble. Sur le côté droit, il doit y avoir un bouton de connexion.

J'ai regardé de nombreux exemples sur le web, mais tous utilisent un navbar-toggler-right qui ne devrait pas apparaître sur la barre de navigation lorsque la page web est en mobile.

Voici ma ce que j'ai pu faire jusqu'à présent:

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

Mais, je ne sont pas le résultat que je veux. La marque navbar prend toute la largeur et le bouton de connexion apparaît dans la rangée suivante.

Webpage Preview

Comment puis-je obtenir le résultat que je veux? J'utilise Bootstrap 4 alpha 6.

Answer 1

Utilisez le navbar-toggleable-xl pour empêcher la barre de navigation de empilant verticalement.

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> 

Par défaut, la barre de navigation est toujours mobile (empilés verticalement), sauf contrordre par l'un des navbar-toggleable-* classes. Puisque vous voulez que la barre de navigation reste toujours horizontale, utilisez la classe 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>