时间戳

首页 > 解决方案 > 扩大jumbotron的高度以覆盖整个柱高

css - 扩大jumbotron的高度以覆盖整个柱高

问题描述

使用引导程序 4.0.0，我有以下代码：

<div class="container">
<div class="row">

<div class="col-md-4">
  <div class="jumbotron mt-3 container-fluid" style="padding: 0.6em 1.6em;">
    <h5>Title</h5>
    <p style="font-size: 14px;">text text text</p>
    <button type="button" class="btn btn-primary"> Click me </button>
  </div>
</div>

... repeated many times

</div>
</div>

我正在尝试通过x jumbotrons 创建一个 3 网格。我无法扩展 jumbotrons 的高度以覆盖它们所在行的 100%。每个人都有自己的身高。理想的情况是 the<h5>和 the<p>是顶部对齐的，而 the<button>是底部对齐的。

我怎样才能实现上述目标？谢谢

标签： csstwitter-bootstrapbootstrap-4

解决方案

为 jumbrotrons 使用 flexbox 工具。

<div class="col-md-4">
     <div class="jumbotron mt-3 h-100 d-flex flex-column align-items-start" style="padding: 0.6em 1.6em;">
          <h5>Title</h5>
          <p style="font-size: 14px;">text texttext</p>
          <button type="button" class="btn btn-primary mt-auto"> Click me </button>
     </div>
</div>

https://www.codeply.com/go/4uafEjOFdn

  • h-100- 使 jumbotron 填充 col 的高度
  • d-flex flex-column- display:flexjumbotron 垂直显示内容
  • align-items-start- 将内容对齐到左侧
  • mt-auto- 在底部对齐底部

相关：Bootstrap 4 卡片 - 在底部对齐内容

推荐阅读