0

新しいコードのベースとして、モバイル デバイスの Bootstrap モーダルにこの修正を使用しました。

bootstrap-responsive.css

.modal { 
    position: fixed; 
    top: 3%; 
    right: 3%; 
    left: 3%;
    bottom:3%; 
    width: auto; 
    margin: 0; 
}
.modal-body { 
    height: 60%; 
}

ブートストラップ.css

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

問題は、モーダルの下部に余分なスペースができることです。

プレビュー

このスペースを削除するにはどうすればよいですか?

問題を示すフィドルを作成しました。

幅 480 のこのフィドルでブラウザの高さを変更してみてください。モーダルフッターは下部に固定する必要がありますが、そうではありませbottom:3%ん。画面が反応しない.modal.modal

4

4 に答える 4

0

モーダルに指定されたbottom属性にコメントを付けようとすると、コードをチェックしました。これがあなたが探しているものだと思います。

.modal { 
    position: fixed; 
    top: 3%; 
    right: 3%; 
    left: 3%;
    /*bottom:3%;*/  /* if u comment this the issue gets resolved */ 
    width: auto; 
    margin: 0; 
}

また、モーダル フッター css を変更して、モーダルと同じ角丸を使用するようにします。

.modal-footer
{
    border-radius: 0 0 3px 3px;
}
于 2013-07-22T06:14:29.100 に答える
0

padding-bottom を削除します。

.modal-body { 
    max-height: 350px; 
    padding: 15px;
    padding-bottom: 0;
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; 
 }
于 2013-07-12T08:22:38.140 に答える