シリーズ『BootstrapだけでLightboxギャラリー実装』~

Bootstrapのモーダル展開時のパディングとスクロール問題解消

Bootstrapのモーダル展開時のパディングとスクロール問題解消



Bootstrapのモーダルを展開した際に、

  • bodyに一見不可解なpadding-right: 17px;が追加される。
  • 背景スクロールが実行できてしまう。

という問題が発生しました。

Bootstrapのドキュメントでは問題無いのだけど、自分のサイトで試すと上記のような症状が現れました。

この解決策として、モーダル展開時にbodyに追加される.modal-openクラスにheight: 100%を追加し、.modalクラスにpadding-right: 0!important;を追加して解決出来ました。

.modal-open {
  overflow: hidden;
  height: 100%;
}
.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 0!important;
}
今日はここまで
Bootstrapのモーダル展開時のパディングとスクロール問題解消

Bootstrapのモーダル展開時のパディングとスクロール問題解消


開発

Bootstrapのモーダルを展開した際に、 bodyに一見不可解なpadding-right: 17px;が追加される。 背景スクロールが実行できてしまう。 という問題が発生しました。 Bootstrapのドキュメント…


関連する記事



シリーズ『BootstrapだけでLightboxギャラリー実装』



こちらはいかが?


Bootstrapの変数を自分のSCSS(SASS)で使う方法
Bootstrapの変数を自分のSCSS(SASS)で使う方法

bootstrapのソースファイルを一括ダウンロードすると、その中には複数のscssファイルが格納されています。 通常、bootstrapの色や幅などの数値を変更するにはその中にある _variables.scss の中…

コメントを残す