使用非正式的Bootstrap模态修改后，启动模态页脚底部的不需要的空间

Question

我在移动设备上使用this fix作为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; 
 }

我遇到的问题是我在模态的底部获得了额外的空间。

如何删除此空间？

我做了fiddle来证明这个问题。

尝试使用宽度为480更改此fiddle中浏览器的高度。当我移除bottom:3%中的.modal时，模态页脚应该粘在底部但不是一切看起来很像this或this，但.modal的高度与屏幕的高度重叠且无响应

Answer 1

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

<强> FIDDLE

@media only screen 
and (orientation : landscape) { 
  .modal-body { 
        height: 160px;  
    }
}

---

哦，顺便说一下：

在小提琴中我通过添加类来修复模型的圆角：

.modal-footer
{
    border-radius: 0 0 4px 4px;
}

Answer 2

删除padding-bottom：

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

Answer 3

如果您尝试评论给模态的底部属性，我检查了代码，我认为这是您正在寻找的。

.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;
}

Answer 4

我相信您的问题是您在Modal中的表格。 将此放到您的CSS中。

.modal form{ margin: 0 !important;}