css - Bootstrap 4网格元素不在同一水平线上

我在Angular中使用Bootstrap 4.0 Grid system创建布局。

但是我得到了这个：



似乎橙色框中的文本与其他人的内容不在同一水平线上。

这是我的代码：

  <div class="container">
  <div class="row">
    <div class="col-8">
      <nav>
        <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
        <a routerLink="/users" routerLinkActive="active">Users</a>
      </nav>
    </div>
    <div class="col-2" [hidden]="!login.online">
      <span>
        {{login.userName}}
      </span>
    </div>
    <div class="col-2" [hidden]="!login.online">
        <span >
            <button class="btn btn-light" (click)="login.logout()">Logout</button>
        </span>
    </div>
  </div>
</div>

它出什么问题了？

我简化了问题，请参见https://jsfiddle.net/Belter/8Ld3nw2t/2/

我希望所有文本都在同一水平线上

最佳答案

您可以覆盖以下内容：

的HTML

<span id="username_id">
     {{login.userName}}
</span>

的CSS

#username_id {
     padding: 0dp;
     margin: 0dp;
}