bootstrap3 の　モーダルの幅変更

※下記はタブレットでうまく中央寄せできなかった。けど一応列記しておく。

.modal-lg で大きさは良しする

.modal-contentの幅を指定する。ただこれだけでは中央寄せにならないのでデフォルト幅が600ｐｘだから、例えば1200ｐｘの横幅にしたときは差分の1200-600＝600　600の半分のマージンの300ｐｘをネガティブマージンのmargin-left:-300px;とする。

https://yokano-jp.blogspot.com/2014/04/bootstrap-modal.html

Bootstrap: modal の幅を変える方法

Twitter Bootstrap ではモーダルなど便利なパーツが提供されています。
モーダルはデフォルトのサイズと小さいサイズが準備されているのですが、
中に入れたいコンテンツと微妙に幅が異なっている場合があります。

今回はデフォルトサイズのモーダルで幅が足りなかったので増やしまました。

div id="edit-modal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content" style="width:740px; margin-left: -70px;">
            <div class="modal-header"><strong>ヘッダ</strong></div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                フッター
            </div>
        </div>
    </div>
</div>

モーダルの白い部分は .modal-content です。
ここの幅を変えるとモーダルの幅が変わります。
モーダルは幅によって中央寄せされないので、
モーダルの幅を増やすとその分右へ伸びてしまいます。
そのため、伸びた分をネガティブマージンで戻して中央へ寄せています。

.modal-content のデフォルトの幅が 600px だったので、
600px から増やした幅の半分をネガティブマージンへ回します。
今回は 600px -> 740px へ 140px 増やしたので、
増分 140px の半分 70px を使用しています。