我刚开始学习前端开发，在学习了html5/css3的基础知识之后，转向引导4。现在，O一直在尝试制作Facebook登录页面的副本，并使用container-fluid100%宽度，然后在其中使用container和row和column。为了匹配背景颜色，我在container-fluid中添加了一个自定义类，然后为了垂直对齐项目，我在row中使用了align-items-end。但是，由于某种原因，它不起作用;我一直在研究它，但什么也找不到。然后，我尝试了一些让它发生的事情。以下是两种情况的代码，请帮助我了解发生了什么以及为什么它以前不起作用，现在为什么它有效？感谢帮助。谢谢。
<head>
<!-- Charset -->
<meta charset="utf-8">
<!-- Responsive -->
<meta name="viewport" content="width=device-width initial-scale=1.0 shrink-to-fit=no">
<!-- styelsheets -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<style>
.bg-fakebook {
background-color: #3b5999 !important;
min-height: 82px;
}
.fakebook-weight {
font-family: Tahoma;
font-weight: bold;
color: white;
margin: 0;
}
</style>
<!-- Title -->
<title>fakebook</title>
</head>
<body>
<div class="container-fluid bg-fakebook">
<div class="container">
<div class="row align-items-end">
<div class="col-md-6">
<h3 class="fakebook-weight">fakebook</h3>
</div>
</div>
</div>
</div>
<!-- -------------------------------------------------------------
JS files: jQuery first, then Popper.js, then Bootstrap JS
--------------------------------------------------------------- -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
输出
然后，在尝试了很多东西之后，我也在row中添加了bg-fakebook，这也有效。
<div class="container-fluid bg-fakebook">
<div class="container">
<div class="row align-items-end bg-fakebook">
<div class="col-md-6">
<h3 class="fakebook-weight">fakebook</h3>
</div>
</div>
</div>
</div>
输出
如果你想先对齐中间，你必须display: flex父级。比添加对齐top center or bottom。喜欢这个
<div class="container-fluid bg-fakebook d-flex align-items-center">
<div class="container">
<div class="row align-items-end">
<div class="col-md-6">
<h3 class="fakebook-weight">fakebook</h3>
</div>
</div>
</div>
</div>
要学习 bootstrap 4，您必须先学习flex。顺便说一句，快乐学习。