css - 使用非官方的 Bootstrap 模态修改后，模态页脚底部的 Bootstrap 不需要的空间

Question

我将 this fix 用于移动设备上的 Bootstrap 模态作为一些新代码的基础:

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

---

哦，顺便说一句:

在 fiddle 中，我还通过添加类修复了模型的圆 Angular :

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