A very basic question from the documentation of Bootstrap. Everything seemed to have worked so far, except this vertical alignment. In the following images you can see How it should be and 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>
2条答案
按热度按时间zynd9foi1#
垂直居中是相对于高度而言的。在您的示例中,所有同级列的高度都相同,因此您不会看到对齐方式的任何变化。
.row
需要定义高度,* 或者 * 列中的某些内容导致行具有更高的高度。演示:https://www.codeply.com/go/aCGgDtzhdY
jgwigjjp2#
您可以使用引导程序预定义类**“vh-100”或“vw-100”(表示“高度:100 vh”或“宽度:100伏小时”**。
视区高度和宽度是指整个视区,它是不同设备及其尺寸的相对测量值。100 vh也是一个百分比,因此100 vh等于100%。
您可以只将vh-100添加到您的标记类中,或者创建一个具有一些其他属性的新类来定制您的组件/标记。