Bootstrap 4网格元素不在同一水平线上
Bootstrap 4网格元素不在同一水平线上
提问于 2017-08-30 18:03:49
我在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/
我希望所有的文本都在同一水平线上
回答 3
Stack Overflow用户
发布于 2017-08-30 18:08:37
您可以覆盖以下内容：
HTML
<span id="username_id">
{{login.userName}}
</span>CSS
#username_id {
padding: 0dp;
margin: 0dp;
}Stack Overflow用户
发布于 2017-08-30 18:14:55
在本例中，span标记button标记的内部是这样的，所以它垂直地显示所有按钮的中心。{{login.userName}}仅包含在跨度tag.We中，需要为make 垂直对齐的CSS属性设置跨度标记属性。
和col 2和col-8不工作，尝试添加col lg-2和col-lg-8，您的代码可能是引导版未连接。
.col-2 span{vertical-align:sub}尝试使用此代码。
Stack Overflow用户
发布于 2017-08-30 19:03:13
btn的填充使行变得更高。另一个文本跨度没有填充，因此它自然地保持在顶部。使用padding utils (例如，py-3)使用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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45957463
复制相关文章
相似问题
腾讯云开发者
