Bootstrap: girtの高さを揃えたい

知りたいこと

Bootstrapを使っています。
分割したgridで片方だけh1タグがない時に高さを揃える方法を知りたいです。

html
1<div class="row mb-2">
2  <div class="col-lg-5 offset-lg-2">
3    <h1>イベント一覧</h1>
4    <div class="card">
5      <div class="card-body">
6        <div class="card-text">イベント</div>
7      </div>
8    </div>
9  </div>
10  <div class="col-lg-3">
11    <!-- <h1>イベント一覧</h1> -->
12    <div class="card">
13      <div class="card-body">
14        <div class="card-text">イベント</div>
15      </div>
16    </div>
17  </div>
18</div>

s8_chu

2020/04/27 01:15

もしよろしければ、タイトルと本文のタイプミス girt を grid へ修正していただけませんか？

行動規範の内容に同意します

回答1件

ベストアンサー

何に対して高さを揃えたいのかがわかりませんが、 align-self-end クラスを用いるか (動作確認用リンク)、

HTML
1<div class="container">
2  <div class="row mb-2">
3    <div class="col-lg-5 offset-lg-2">
4      <h1>イベント一覧</h1>
5      <div class="card">
6        <div class="card-body">
7          <div class="card-text">イベント</div>
8        </div>
9      </div>
10    </div>
11    <div class="col-lg-3 align-self-end">
12      <!-- <h1>イベント一覧</h1> -->
13      <div class="card">
14        <div class="card-body">
15          <div class="card-text">イベント</div>
16        </div>
17      </div>
18    </div>
19  </div>
20</div>

d-flex, flex-grow-1 (もしくは w-100 クラスなど) を用いることで質問者さんの実現したいことは行えると思います (動作確認用リンク)。

HTML
1<div class="container">
2  <div class="row mb-2">
3    <div class="col-lg-5 offset-lg-2">
4      <h1>イベント一覧</h1>
5      <div class="card">
6        <div class="card-body">
7          <div class="card-text">イベント</div>
8        </div>
9      </div>
10    </div>
11    <div class="col-lg-3 d-flex">
12      <!-- <h1>イベント一覧</h1> -->
13      <div class="card flex-grow-1">
14        <div class="card-body">
15          <div class="card-text">イベント</div>
16        </div>
17      </div>
18    </div>
19  </div>
20</div>