twitter-bootstrap 使用 jQuery UI 问题使 Bootstrap 模态可调整大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32973743/
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
Making Bootstrap modal resizable with jQuery UI issue
提问by user3618473
So I have a Bootstrap modal I've created and I am trying to make it resizable using jquery. I have the resize working horizontally but if you try to resize vertically its like the content inside of the modal is not contained within the element I am trying to resize.
所以我创建了一个 Bootstrap 模式，我正在尝试使用 jquery 调整它的大小。我有水平调整大小，但是如果您尝试垂直调整大小，就像模态内部的内容不包含在我尝试调整大小的元素中一样。
I tried using the 'alsoResize' property on the .resizable()and included all the divs within the modal but that seems to cause other issues.
我尝试使用 'alsoResize' 属性.resizable()并将所有 div 包含在模态中，但这似乎会导致其他问题。
$('.modal-content').resizable({
alsoResize: ".modal-header, .modal-body, .modal-footer"
});
Here is my example: https://jsfiddle.net/p7o2mkg4/
这是我的例子：https: //jsfiddle.net/p7o2mkg4/
回答by Abraar Arique Diganto
You actually did everything right! But the default overflowbehaviour of HTML elements is visible. So if the parent element's content gets overflowed, they break out of the modal and that doesn't look good! So, you need to set the CSS overflowproperty to scrollor hiddento fix breaking on small size. Try adding:
你实际上做对了一切！但是overflowHTML 元素的默认行为是visible. 因此，如果父元素的内容溢出，它们就会脱离模态，这看起来不太好！因此，您需要将 CSSoverflow属性设置为scroll或hidden修复小尺寸中断。尝试添加：
.modal-content.ui-resizable {
overflow: scroll;
}
This will ensure scrolling on overflow of the element.
这将确保在元素溢出时滚动。
Link to JSFiddle:https://jsfiddle.net/p7o2mkg4/1/
链接到 JSFiddle：https ://jsfiddle.net/p7o2mkg4/1/
回答by R_Ice
This works (css)
这有效（css）
#myModal>div{
overflow-y: hidden;
overflow-x: hidden;
}
