Bootstrap 4将行与容器底部对齐答案

【问题标题】：Bootstrap 4 aligning row to the bottom of a containerBootstrap 4将行与容器底部对齐
【发布时间】：2018-05-23 09:09:29
【问题描述】：

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

像这样：

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

【问题讨论】：

你想附加在屏幕当前可见的View Port底部还是容器底部？
容器...

标签： html css bootstrap-4

【解决方案1】：

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

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

【讨论】：

正确答案。可能还想在行上使用 row-eq-height。

【解决方案2】：

你可以这样做

position:absolute;
bottom:0;

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

对齐自中心

【讨论】：

【解决方案3】：

尝试将 align-self-end 类添加到具有 col 类的 div 中

&lt;div class="col align-self-center"&gt;

【讨论】：

【解决方案4】：

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

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

或者如果你只有一个元素

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

【讨论】：

【解决方案5】：

如果您使用的是 bootstrap 4，则可以使用该类 - 固定底部。

检查：

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

Fixed footer in Bootstrap

【讨论】：

这是正确答案，可能是由于时间的推移和框架的更新。