nav-brand와 log-in 버튼을 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을 사용하고 있습니다. navbar-toggleable-* 클래스 중 하나에 의해 오버라이드 (override)하지 않는 한 기본적으로

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