Question

我在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/

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

Answer 1

你可以改写：

HTML

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

CSS

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

Answer 2

在你的情况下，span标签按钮标签内部就在那里，所以它显示所有按钮的垂直中心。 {{login.userName}}仅包含在span标记中。我们需要为make vertical-align CSS 属性设置span标记属性。

col-2和col-8 无效，尝试添加 col-lg-2和col-lg-8 ，您的代码可能是bootstrap版本没有连接。

.col-2 span{vertical-align:sub}

尝试使用此代码。

Answer 3

btn的填充使行更高。另一个文本跨度没有填充，因此它自然地保持在顶部。使用padding utils（例如。py-3）调整col span ...

https://www.codeply.com/go/Q29TK0nEuF

<div class="container">
    <div class="row">
        <div class="col-8">
            <nav>
                <a class="btn btn-light" routerlink="/dashboard" routerlinkactive="active">Dashboard</a>
                <a class="btn btn-light" routerlink="/users" routerlinkactive="active">Users</a>
            </nav>
        </div>
        <div class="col-2 py-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>

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

3 个答案: