Bootstrap使用非正式引导模式修改后，模式页脚底部的不需要的空间 [英] Bootstrap Unwanted space on the bottom of modal-footer after using the unofficial Bootstrap Modal modification

问题描述

我在移动设备上使用的宽度为480.模式页脚应该粘在底部，但它不，当我删除 bottom：3％ in .modal 一切都像此或此 .modal 的高度与屏幕的高度重叠，并且不响应

解决方案

您可以检查方向是否为横向 - 并最小化模态体的大小。

FIDDLE

  @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

FIDDLE

@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使用非正式引导模式修改后，模式页脚底部的不需要的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！