11

私はこれを行う1つの方法を見つけました：

マージンを使用してダイアログの位置を制御しmargin: -335px 0 0 -280pxます。

幅を設定するには、マージンをリセットする必要がありますwidth: 900px; margin: -250px 0 0 -450px;

max-height: 800px; 高さを設定するには、に基づいてmax-heightを使用 します

http://www.revillwebdesign.com/change-the-height-width-and-position-of-a-modal-in-twitter-bootstrap/

これを行うためのより良い方法はありますか？このアプローチまたは別のアプローチを使用して、ダイアログを下にスライドさせtop:0px、閉じられるまでそこにとどまる方法はありますか？

私が言及した最初のマージン設定を使用してこれを行いますが、明らかにブラウザのサイズが変更されるとすぐに表示されなくなります。

4

2 に答える 2

17

CSSの位置を上書きするだけです。

.modal, .modal.fade.in {
    top: 0; /* was 10% */
}

これはBootstrap2.2.2の場合であることに注意してください。唯一のマージンは、モーダルの幅の半分である負の左マージンです（モーダルを水平方向に中央に配置します）。上マージンは必要ありません。

ここにjsFiddleの例-http ://jsfiddle.net/uuwAn/1/

于 2013-01-09T05:57:40.517 に答える
0

CSSこの動作をアーカイブするために、最後にを変更できます。

.modal-body {
    max-height: 350px;
    -webkit-overflow-scrolling: touch;
}

@media screen and (max-height: 450px), (max-height: 450px) {
    .modal-body {
        max-height: 130px;
    }

}

これで、モバイルデバイスでうまく機能します。注：のメディアクエリを使用して実行されますCSS。

于 2013-12-26T10:03:19.833 に答える