Bootstrap 文档中的一个非常基本的问题。到目前为止,一切似乎都正常,除了这个垂直对齐。在下图中,您可以看到 How it should be和 How it appears in my browser .
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
最佳答案
垂直中心相对于高度。在您的示例中,所有同级列的高度都相同,因此您不会看到任何对齐方式的变化。
.row
需要定义高度,或列中的某些内容导致行具有更高的高度。
<div class="container">
<div class="row" style="height:180px">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
关于twitter-bootstrap - Bootstrap 垂直对齐属性不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50657084/