Bootstrap 4将行与容器底部对齐

Posted 2023-03-21

【中文标题】Bootstrap 4将行与容器底部对齐

【英文标题】：Bootstrap 4 aligning row to the bottom of a container

【发布时间】：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底部还是容器底部？

容器...

【参考方案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 中

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

【参考方案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

【讨论】：

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