css - Bootstrap 4 Navbar 响应问题

Question

我在 Angular 应用程序中有一个 Boostrap 4 导航栏。有一些响应问题。 Logo 在宽度减少一定幅度后向右移动，但在其他宽度上仍保持在左侧。以及如何让登录和注册按钮始终保持在正确位置？

这是 codepen对于相同的。而bootstrap代码如下:

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