问题描述
我在移动设备上使用的宽度为480.模式页脚应该粘在底部,但它不,当我删除 bottom:3%
in .modal
一切都像或
@media only screen
and(orientation:landscape){
.modal-body {
height:160px;
}
}
哦,顺便说一下:
在小提琴中,我通过添加类来修正模型的圆角:
.modal-footer
{
border-radius:0 0 4px 4px;
}
I used this fix for Bootstrap modals on mobile devices as a base for some new code:
bootstrap-responsive.css
.modal {
position: fixed;
top: 3%;
right: 3%;
left: 3%;
bottom:3%;
width: auto;
margin: 0;
}
.modal-body {
height: 60%;
}
bootstrap.css
.modal-body {
max-height: 350px;
padding: 15px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
The problem is I'm having is I get extra space at the bottom of the modal.
How can I remove this space?
I made a fiddle that demonstrates the issue.
Try changing the height of the browser in this fiddle with a width of 480. The modal-footer should stick at the bottom but its not, when I remove the bottom:3%
in .modal
everything looks fine like this or this but the height of .modal
overlaps the height of the screen and its not responsive
You could check to see if the orientation is landscape - and minimize the size of the modal-body accordingly
@media only screen
and (orientation : landscape) {
.modal-body {
height: 160px;
}
}
Oh and by the way:
In the fiddle I fixed up the rounded corners of the model as well by adding the class:
.modal-footer
{
border-radius: 0 0 4px 4px;
}
这篇关于Bootstrap使用非正式引导模式修改后,模式页脚底部的不需要的空间的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!