Bootstrap4でモーダルオープン時に背景画像がズレる問題

対応バージョン：Bootstrap 4.1

background-sizeプロパティでcoverを指定して全面に背景画像を表示させている場合、モーダルウィンドウを開くと背景画像がズレる問題が発生します。

モーダルウィンドウ表示の際にページのスクロールバーが非表示になるので、スクロールバーの幅の分だけ背景画像が拡大されているのが原因のようです。

調べてみたことろ、背景画像ではなくコンテンツの（内容）そのものが右にズレるという問題を発見。掲載されていた対処法を試してみました。

.modal-open {
  padding-right: 0px !important;
  overflow: auto;
}
.modal {
  padding-right: 0px !important;
}

しかし、今度はnavで作成したメニューの内容が左にズレる問題が発生。
この問題の解決方法として下記CSSを追記します。

.navbar {
  padding-right: 0 !important;
}

これで当初の問題は完全に解決出来ました。