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

新手上路,请多包涵

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

像这样:像这样

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 许可协议

阅读 366
2 个回答

你可以这样做

 position:absolute;
bottom:0;

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

对齐自我中心

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题