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

Question

如何将引导程序行与容器底部对齐？

像这样：

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 ，但没有用。

原文由 Luke Won 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以这样做

 position:absolute;
bottom:0;

但这不是执行此操作的正确方法。您可以将 near 添加到您的 col 类

对齐自我中心

原文由 Bekzod 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

原文由 staxim 发布，翻译遵循 CC BY-SA 3.0 许可协议