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;
}