如何在引导程序（4.1）中将所有行与容器底部对齐？

Question

设置：

1. 我有一个覆盖整个视口的容器（高度：100vh）；
2. 在这个容器中我有 4 行。

必填：

1. 我需要容器底部的所有行。
2. 行之间不应有任何间距。 （简而言之，我需要将整个页面内容对齐到屏幕底部。如果还有多余的空间，它应该保留在页面顶部。）

我尝试使用 self-align-end 但它仅适用于一行中的列，而不适用于容器中的行。

在此先感谢 ;)

片段：

.row:last-child {
  position: fixed;
  bottom: 0;
  left: 0;/*optional*/
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="container-fluid bg-dark" style="height: 100vh;">
  <div class="row bg-warning container-fluid no-gutters justify-content-start">
    This is Row 1
  </div>
  <div class="row bg-danger container-fluid no-gutters justify-content-center">
    This is Row 2
  </div>
  <div class="row bg-warning container-fluid no-gutters justify-content-end">
    This is Row 3
  </div>
  <div class="row bg-success container-fluid no-gutters justify-content-center">
    This is Row 4
  </div>
</div>

Answer 1

为container d-flex align-items-end 添加这个类

/*.row:last-child {
  position: fixed;
  bottom: 0;
  left: 0;
}*/

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="container-fluid bg-dark d-flex align-items-end" style="height: 100vh;">
  <div class="row bg-warning container-fluid no-gutters justify-content-start">
    This is Row 1
  </div>
  <div class="row bg-danger container-fluid no-gutters justify-content-center">
    This is Row 2
  </div>
  <div class="row bg-warning container-fluid no-gutters justify-content-end">
    This is Row 3
  </div>
  <div class="row bg-success container-fluid no-gutters justify-content-center">
    This is Row 4
  </div>
</div>

Answer 2

添加“d-flex align-content-end flex-wrap”

试试这个。

/*
.row:last-child {
  position: fixed;
  bottom: 0;
  left: 0;
}*/

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="container-fluid bg-dark d-flex align-content-end flex-wrap" style="height: 100vh;">
  <div class="row bg-warning container-fluid no-gutters justify-content-start">
    This is Row 1
  </div>
  <div class="row bg-danger container-fluid no-gutters justify-content-center">
    This is Row 2
  </div>
  <div class="row bg-warning container-fluid no-gutters justify-content-end">
    This is Row 3
  </div>
  <div class="row bg-success container-fluid no-gutters justify-content-center">
    This is Row 4
  </div>
</div>