twitter-bootstrap Bootstrap - Popover 被模态标题切断
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/18882359/
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 - Popover gets cut off by modal header
提问by Tom Gerken
I am using a popover inside a modal window in Bootstrap 2.3.1. The problem is that the popover displays UNDER the modal-header div.
我在 Bootstrap 2.3.1 的模态窗口内使用弹出框。问题是弹出窗口显示在模态标题 div 下。
You can see an example / fiddle of this problem here: ("Launch Demo Modal", then "Click to toggle popover") http://jsfiddle.net/cZ6Cr/2/
您可以在此处看到此问题的示例/小提琴:(“启动演示模式”,然后“单击以切换弹出窗口”) http://jsfiddle.net/cZ6Cr/2/
The relevant code is:
相关代码是:
<a class="btn" data-content="And here's some amazing content. It's very engaging. right? And another thing about this is a that it's really long. When I say long I mean really, really long."
rel="popover"
href="#"
data-original-title="A Title">
Click to toggle popover
</a>
*I modified a fiddle created by cvrebert from this thread on GitHub https://github.com/twbs/bootstrap/issues/5014
*我修改了 cvrebert 从 GitHub https://github.com/twbs/bootstrap/issues/5014上的这个线程创建的小提琴
采纳答案by Tom Gerken
Fixed by using:
.modal-body{overflow-y:visible;}
通过使用固定:
.modal-body{overflow-y:visible;}
OR
或者
.modal-body{overflow:visible;}
Fiddle: http://jsfiddle.net/cZ6Cr/4/
回答by KyleMit
It proves a little tricky to dynamically resize your modal container based on tooltip size.
However, you can take your tooltip out of the HTML flow by adding position: fixed.
根据工具提示大小动态调整模态容器的大小证明有点棘手。
但是,您可以通过添加position: fixed.
CSS:
CSS:
.popover {
z-index: 9999;
position: fixed;
}
Live Demo in jsFiddle
jsFiddle 中的现场演示
Which will look likes this:
看起来像这样:



