Bootstrap 4- align-items-*类根本不工作
Bootstrap 4- align-items-*类根本不工作
提问于 2018-06-04 07:35:57
我目前正在建立一个Bootstrap 4框架的网站。我发现我不能正确地对齐项目。
示例：
Bootstrap 4 official documentation row positioning
根据文档编写代码：
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>在类似的问题中，建议将min-height属性放在父类中，但这并没有解决我的问题。
我知道这可能是个愚蠢的问题，但我是新手。
谢谢您抽时间见我。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-04 07:50:21
这些div的父类，也就是div.row没有高度，它的高度是由它的内容定义的，也就是你试图垂直对齐的那些div，因此没有空间让这些div像它们应该的那样对齐。
正如你可能已经注意到的，他们有一个特殊的例子，你可以看到粉红色的背景，也就是div.row，它的最小高度是10rm。
见下图
基本上，你需要一个高度来让东西在垂直空间中移动。
简单示例
.row {
height: 5em;
border: 1px solid;
margin: 10px 0;
background-color: orange;
}
.container>.row>div:nth-child(1) {
background-color: red;
}
.container>.row>div:nth-child(2) {
background-color: blue;
}
.container>.row>div:nth-child(3) {
background-color: brown;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
Stack Overflow用户
发布于 2018-06-04 07:46:16
垂直中心是相对于高度的。在您的示例中，所有兄弟列的高度都相同，因此您不会看到对齐方式的任何变化。.row需要有一个定义的高度，或者在列中放置一些内容以使行具有更多的高度……
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50671922
复制相关文章
相似问题
腾讯云开发者
