Jumbotron Bootstrap中的底部对齐元素[重复]

Question

我想垂直对齐覆盖整个页面的 jumbotron 底部的元素（箭头）。我希望能够在不使用 jquery 的情况下做到这一点；我只想使用 HTML、CSS 和 JavaScript（如果需要）。

---

元素<a href="#section2" class="container"><i class="fa fa-arrow-circle-down" id = "arrow" style="font-size:40px"></i></a>需要根据jumbotron底部对齐

---

下面给出了所需的最小片段

---

.jumbotron {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('https://images.unsplash.com/photo-1546448396-6aef80193ceb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80');
  background-repeat: no-repeat;
  margin-bottom: 0px;
  background-position: center;
  background-size: cover;
  min-height: 100vh;
}

#arrow {
  margin-left: 50%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <p class="lead">
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  </p>


  <i class="fa fa-arrow-circle-down" id="arrow" style="font-size:40px"></i>
</div>

Answer 1

需要围绕要固定到顶部的内容创建一个 div，然后创建另一个要固定到底部的 div，然后弯曲 jumbotron。

.jumbotron{
display:flex;
  flex-direction:column;
  justify-content:space-between;
}

https://codepen.io/mike-portman/pen/xxVoXdq