html - Bootstrap 4 将行对齐到容器的底部

Question

如何将 Bootstrap 行与容器底部对齐？

像这样:

HTML

<main class="bd-masthead container-fluid" id="" role="main" style="padding-top:5rem;">
  <div class="row">
    <div class="col">
      <h1 class="text-light">
        LukeBank
      </h1>
    </div>
  </div>
  <div class="row" style="padding-top:10px">
    <div class="col">
      <button type="button" class="btn btn-outline-light">Button</button>
    </div>
  </div>
</main>

CSS

html, body {
  height: 100%;
  width: 100%;
}

main {
  height: 100%;
  background-image: url(/img/frontpage.bg.jpg); 
  background-position: center center;
  background-size: cover; 
}

.otherpart {
  height: 100%;
  background-color: white;
  background-position: center bottom;
  background-size: cover;  
}

我尝试使用 .align-bottom，但没有成功。

Answer 1

对于 bootstrap 4，您可以使用速记类并设置 mt-auto，这将使您的元素与容器底部对齐。

https://getbootstrap.com/docs/4.0/utilities/spacing/