Bootstrap 使用非官方的 Bootstrap Modal 修改后，modal-footer 底部出现不需要的空间答案

【问题标题】：Bootstrap Unwanted space on the bottom of modal-footer after using the unofficial Bootstrap Modal modificationBootstrap 使用非官方的 Bootstrap Modal 修改后，modal-footer 底部出现不需要的空间
【发布时间】：2013-07-12 07:44:36
【问题描述】：

我将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 来演示这个问题。

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

【问题讨论】：

你能发布你的HTML/制作一个JSFiddle吗？试底：0；在你自己的样式表中
移除 .modal-body css 中的 padding 属性
刚刚创建了小提琴

标签： css twitter-bootstrap

【解决方案1】：

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

FIDDLE

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

哦，顺便说一句：

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

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

【讨论】：

已经这样做了..但是如果我在移动横向模式下查看网站，我看不到页脚。
刚刚在设备上进行了测试.. 工作完美..但是我应该添加什么以使 modal-body 的高度在平板设备上不是 160px。在小型设备上也有问题。看不到页脚按钮。
小高度的设备。
除了方向之外，您还可以使用媒体查询来定位大型/小型设备这里有一个链接，其中包含每个设备的许多媒体查询示例：stephen.io/mediaqueries 也看看这个 sn-p：snipplr.com/view/67341
以上链接应该足以照顾平板电脑/小型设备......如果没有，请告诉我，我会用示例更新我的答案

【解决方案2】：

我相信您的问题是您在 Modal 中的表单。把它放到你的 CSS 中。

.modal form{ margin: 0 !important;}

【讨论】：

【解决方案3】：

删除填充底部：

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

【讨论】：

【解决方案4】：

如果您尝试评论赋予模式的底部属性，我检查了代码，我认为这就是您要寻找的。p>

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

【讨论】：