如何在引导程序（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>