0

我将此修复用于移动设备上的 Bootstrap 模态，作为一些新代码的基础：

引导响应.css

.modal { 
    position: fixed; 
    top: 3%; 
    right: 3%; 
    left: 3%;
    bottom:3%; 
    width: auto; 
    margin: 0; 
}
.modal-body { 
    height: 60%; 
}

引导程序.css

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

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

预览

我怎样才能删除这个空间？

我做了一个演示这个问题的小提琴。

尝试在这个小提琴中更改浏览器的高度，宽度为 480。模态页脚应该粘在底部，但它不是，当我删除时bottom:3%，.modal一切看起来都很好，像这样或这样，但高度.modal重叠的高度屏幕，它没有响应

4

4 回答 4

2

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

小提琴

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

哦，顺便说一句：

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

.modal-footer
{
    border-radius: 0 0 4px 4px;
}
于 2013-07-22T05:26:19.193 回答
1

我相信你的问题是你在模态中的形式。把它放到你的 CSS 中。

.modal form{ margin: 0 !important;}
于 2019-03-16T06:41:41.237 回答
0

删除填充底部：

.modal-body { 
    max-height: 350px; 
    padding: 15px;
    padding-bottom: 0;
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; 
 }
于 2013-07-12T08:22:38.140 回答
0

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

.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;
}
于 2013-07-22T06:14:29.100 回答