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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 18:27:27  来源:igfitidea点击:

Bootstrap - Popover gets cut off by modal header

csstwitter-bootstrap

提问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/

小提琴: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:

看起来像这样:

demo

演示