ブートストラップ4 Navbar応答的な問題

Question

私はAngularアプリケーションでBoostrap 4 navbarを持っています。応答する問題がいくつかあります。ロゴはある幅の縮小後に右に移動しますが、他の幅では左にとどまります。また、どうすればログインと登録ボタンを常に右に置くことができますか？

これは同じもののcodepenです。そして、ブートストラップコードは次のとおりです。

<div class="header"> 
    <nav class="navbar fixed-top navbar-expand-lg navbar-light" role="navigation"> 
    <div class="container"> 
     <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <i class="fa fa-bars"></i> 
     </button> 
     <a class="navbar-brand" href="/"> 
     <img class="img-fluid" src="https://www.keyshot.com/wp-content/uploads/2015/07/keyshot-6-logo-150.png"> 
     </a> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav ml-auto"> 
      <li class="nav-item"> 
      <a (click)="goToDiv('features')" class="nav-link">Features</a> 
      </li> 
      <li class="nav-item"> 
      <a (click)="goToDiv('exams')" class="nav-link">Exams</a> 
      </li> 
      <li class="nav-item"> 
      <a (click)="goToDiv('pricing')" class="nav-link">Pricing</a> 
      </li> 
      <li class="nav-item"> 
      <a (click)="goToDiv('app')" class="nav-link">App</a> 
      </li> 
      <li class="nav-item"> 
      <a (click)="goToDiv('contact')" class="nav-link">Contact</a> 
      </li> 
     </ul> 
     </div> 
     <ul class="nav navbar-nav ml-auto d-block d-sm-none step"> 
     <li class="nav-item"> 
      <a routerLink="/login" class="login re-hover nav-link"> 
      <i class="fa fa-sign-in" aria-hidden="true"></i> 
      </a> 
     </li> 
     <li class="nav-item"> 
      <a routerLink="/register" class="login nav-link"> 
      <i class="fa fa-user-plus" aria-hidden="true"></i> 
      </a> 
     </li> 
     </ul> 
     <ul class="nav navbar-nav ml-auto d-none d-sm-block step"> 
     <li class="nav-item"> 
      <a routerLink="/login" style="color: #32c8fa" class="login nav-link"><i class="fa fa-sign-in" style="margin-right: 5px;" aria-hidden="true"></i><b>LOGIN</b></a> 
     </li> 
     <li class="nav-item"> 
      <a routerLink="/register" style="color: #32c8fa" class="login nav-link"><i class="fa fa-user-plus" style="margin-right: 5px;" aria-hidden="true"></i><b>REGISTER</b></a> 
     </li> 
     </ul> 
    </div> 
    </nav> 
</div> 

Answer 1

その問題は、メディアクエリと.navbar-toggler

削除パディングでトグルボタンのパディングであり、それは

@media (max-width: 480px) { 
    .navbar-brand{ 
    margin-right : 0px; 
    } 
    .navbar-toggler{padding:0px;} 
}