2014年4月23日水曜日

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 を使用しています。

0 件のコメント:

コメントを投稿