twitter-bootstrap Bootstrap 使用非官方 Bootstrap Modal 修改后模态页脚底部不需要的空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17609977/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Unwanted space on the bottom of modal-footer after using the unofficial Bootstrap Modal modification
提问by Snippet
I used this fixfor Bootstrap modals on mobile devices as a base for some new code:
我将此修复用于移动设备上的 Bootstrap 模式，作为一些新代码的基础：
bootstrap-responsive.css
bootstrap-responsive.css
.modal {
position: fixed;
top: 3%;
right: 3%;
left: 3%;
bottom:3%;
width: auto;
margin: 0;
}
.modal-body {
height: 60%;
}
bootstrap.css
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 fiddlethat demonstrates the issue.
我做了一个小提琴来演示这个问题。
Try changing the height of the browser in this fiddlewith a width of 480. The modal-footer should stick at the bottom but its not, when I remove the bottom:3%in .modaleverything looks fine like thisor thisbut the height of .modaloverlaps the height of the screen and its not responsive
试着改变浏览器的高度，在这个小提琴与480的宽度模态躯应该坚持在底部，但它不是，当我删除bottom:3%的.modal一切都看起来不错像这样或这样，但高度.modal重叠的高度屏幕和它没有响应
回答by Danield
You could check to see if the orientation is landscape - and minimize the size of the modal-body accordingly
您可以检查方向是否为横向 - 并相应地最小化模态主体的大小
@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;
}
回答by LegendaryAks
I checked the code if u try commenting the bottom attribute given to the modal, i think this is what u r looking for.
如果您尝试评论赋予模态的底部属性，我检查了代码，我认为这就是您要寻找的。
.modal {
position: fixed;
top: 3%;
right: 3%;
left: 3%;
/*bottom:3%;*/ /* if u comment this the issue gets resolved */
width: auto;
margin: 0;
}
Also make change your modal footer css so it takes the same rounded-corners as the modal
还要更改您的模态页脚 css，使其具有与模态相同的圆角
.modal-footer
{
border-radius: 0 0 3px 3px;
}
回答by mrgemini
I believe your problem is your form inside the Modal. Put this to your CSS.
我相信你的问题是你在 Modal 中的形式。把它放到你的 CSS 中。
.modal form{ margin: 0 !important;}
回答by Snippet
Remove padding-bottom:
删除填充底部：
.modal-body {
max-height: 350px;
padding: 15px;
padding-bottom: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
