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

Answer 1

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

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

Answer 2

您可以使用

执行此操作

＆＃13;

＆＃13;

position:absolute;
bottom:0;

＆＃13;

＆＃13;

＆＃13; 但这不是一种正确的方法。您可以在 col 类

附近添加

  

对准自中心

Answer 3

尝试使用 col 类

将 align-self-end 类添加到div

<div class="col align-self-center">

Answer 4

要与底部对齐，可以尝试使用flexbox：

display: flex;
flex-direction: column;
justify-content: space-between;

或者如果您只有一个元素

display: flex;
flex-direction: column;
justify-content: flex-end;

Answer 5

如果您正在使用引导程序4，则可以使用类-固定底部。

检查：

https://getbootstrap.com/docs/4.4/utilities/position/#fixed-bottom

Fixed footer in Bootstrap