Bootstrap 4 - align-items-* 类根本不起作用[重复]答案

【问题标题】：Bootstrap 4 - align-items-* class not working at all [duplicate]Bootstrap 4 - align-items-* 类根本不起作用[重复]
【发布时间】：2018-11-13 06:40:10
【问题描述】：

我目前正在使用 Bootstrap 4 框架构建网站。我注意到我无法正确对齐项目。

例子：

Bootstrap 4 official documentation row positioning

My 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 属性放在父类上，但这并没有解决我的问题。

我可能知道，这是一个愚蠢的问题，但我是新手。

感谢您的宝贵时间。

【问题讨论】：

对于 bootstrap5，如果 align-content-?? 被 justify-content-end 、 -center 或 -start 替换，它就可以工作

标签： css bootstrap-4

【解决方案1】：

那些 div aka 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>

【讨论】：

这里不是说垂直对齐吗？我认为 OP 是在谈论水平对齐，在我的情况下它也不起作用。
@TheRealChx101 我很确定操作的问题是关于垂直对齐，但是水平对齐根本没有什么不同，你需要一个宽度并且元素不应该占据所有空间。
@TheRealChx101 你可以发个问题或者给我一个sn-p的链接，我很乐意看看。

【解决方案2】：

我已经answered this question了。

垂直中心是相对于高度的。在您的示例中，所有同级列的高度相同，因此您不会看到对齐方式有任何变化。 .row 需要有一个定义的高度，或在列中放置一些内容导致行有更多的高度...

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

【讨论】：