ブログ

Bootstrap 4 のmodalの表示幅を画面いっぱいにするには 2020.03.17

Bootstrap 4 のmodalでは、4種類のサイズを指定できるようになっています。

ただ、これらのサイズは、ブレークポイントに応じて「max-width」を指定しているだけなので、画面幅いっぱいには広がってくれません。

例えば、何か複数の画像などのアイテムを選択させるケースなど、情報量を多くしておきたい時には、画面幅いっぱいに広がってくれると助かります。

対処方法

あらかじめ、次のようなCSSクラスを定義しておきます。

.modal-dialog-fluid {
  max-width: inherit;
  width: 98%;
  margin-left: 15px;
}

少し解説します。

  1. 「max-width: inherit;」にてブレークポイントに応じた「max-width」の指定を解除しています。
  2. 次に、常に画面幅いっぱいに広がるように「width」を98%にしています。100%にしたいところですが、Bootstrapによって、 .modal-daialogの親要素の<div>に対して動的にstyle属性で「padding-right: 21px;」が指定されている影響で、 右側のマージン調整が簡潔にできません。そのため、98%にして少し隙間を空けています。
  3. 最後に、「margin-left: 15px;」で左側にも隙間を空けています。左側は、このように問題なく調整できます。

モーダルの右側の隙間が若干あいてしまいますが、画面幅いっぱいに広がって要件を満たせそうです。

次に、.modal-dialogクラスを記述している部分に、上記のクラスを追記するだけです。

HTMLの比較(赤文字が追加)
修正前
<div class="modal-dialog" role="document">
修正後
<div class="modal-dialog modal-dialog-fluid" role="document">

次のボタンから、実際に表示できますのでお試しください。

以上、お役に立てれば幸いです。