バージョン：BootStrap-3.3.2
Twitter BootStrapでModal(背景が暗くなって、ポップアップが浮かび上がる機能)を使うと、画面全体が少し左にずれる問題があります。
このままだとModalを呼ぶたびに画面がカチャカチャ変わってとてもかっこ悪い。
原因はModalを呼び出すと右側のスクロールバーが消えて、表示できる画面の幅が変わるためです。
この問題を解決するためにはCSSへのコード追加とBootStrap.jsの修正です。
CSSへ追加
下記を読み込んでいるCSSに追記してください。デフォルトだとmodal-openクラスのoverflow-y要素がhiddenになっているのですが、これをいれることでスクロールバーが消えない、つまり幅ずれがおきなくなります。
.modal-open {
overflow: auto;
}
bootstrap.jsを修正
おそらくこの問題を解決するために中途半端に混入されているpadding-rightの自動挿入なのですが、これをコメントアウトします。
Modal.prototype.setScrollbar = function () {
//var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
//if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
}
photo: http://www.hongkiat.com/blog/twitter-bootstrap/