Question

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

我知道这可能是一个愚蠢的问题，但我是引导程序中的新手。

感谢您的时间。

Answer 1

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

Answer 2

我已经answered this question。

垂直中心相对于高度。在您的示例中，所有同级列都具有相同的高度，因此您不会看到对齐方式的任何变化。 (?s)Table.*?(Seat (\\d).*?\\((\\d+).*?).*?HOLE需要有一个已定义的高度，或将一些内容放入导致行具有更多高度的列中...

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

Bootstrap 4 - align-items- *类根本不工作

2 个答案: