bootstrap4で画像とボタンの高さを揃えたい

Question

以下のような画面を作成したいと思っています。

左を画像、右2つをボタンにしようと思いましたが、
高さを揃えられず悩んでいます。

<div class="row mb-2">
	<div class="col-lg-5 mb-4">
		<img src="img/img_index1.png" class="img-fluid d-block mx-auto" alt="">
	</div>
	<div class="col-lg-7 mb-5">
		<div class="row">
			<div class="col-lg-6 mb-4">
				<a href="#"><div class="btn_index1">お問い合わせ</div></a>
			</div>
			<div class="col-lg-6 mb-4">
				<a href="#"><div class="btn_index2">LINEでお問い合わせ</div></a>
			</div>
		</div>
	</div>
</div>

他場面でボタン2つの高さを揃える際には"h-100"を設定しましたが、
今回はうまくいきません。

よろしくお願いします。

Answer 1

Bootstrapの前に,HTMLでは指定がなければ要素の内容部分(content)に応じて高さが決まる仕様があります. 今回のケースでは画像や「お問い合わせ」「LINEでお問い合わせ」という文字が内容部分になるので,それらが元々持っている高さでその要素の高さが決まっています.

h-100という指定は親要素の高さに対して100%の高さを持たせるという意味なので,親要素の高さが期待していた高さと異なると意図したスタイルになりません.

したがって,シンプルに絶対指定で高さを指定してみてはいかがでしょうか.他にもremやemで指定することもできると思います.

img.img-fluid {
  height: 50px;
}
.btn_index1, .btn_index2 {
  height: 50px;
  line-height: 50px;
}

Comments

[sho.duck]

ありがとうございます。
おかげさまで希望通りの表示が行えました！

[sho.duck]

丁寧にご説明いただきありがとうございました。
"px"指定することとしました。

[honyao]

期待通りの表示にできたようで、よかったです。