Question

使用bootstrap 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％。每个人都有自己的身高。理想情况是<h5>和<p>是顶部对齐的，而<button>是底部对齐的。

我如何实现上述目标？感谢

Answer 1

将flexbox utils用于jumbrotrons。

<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 - 制作col的jumbotron填充高度
d-flex flex-column - display:flex jumbotron垂直内容
align-items-start - 将内容对齐左侧
mt-auto - 底部对齐底部

相关：Bootstrap 4 cards - align content at the bottom

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

1 个答案: