Bootstrap tabbable和popover之间的冲突 [英] Conflict between Bootstrap tabbable and popover
问题描述
我正在尝试在同一页面中使用Twitter Bootstrap tabbable和Bootstrap popovers。我难以解决弹出窗口问题，这些弹出窗口不能超出标签的限制（问题是当弹出窗口出现在边框旁边时，它是半隐藏的）。
I am trying to use Twitter Bootstrap tabbable and Bootstrap popovers in a same page. I am having difficulties resoling the problem of popovers that can't appear beyond tab's limits (problem is when the popover appears next to a border, it's half-hidden).
我不是JQuery的专家，但据我了解，问题来自于在iframe中创建的标签，并且弹出窗口不能显示在其iframe之外。
I am not an expert in JQuery, but as far as I understand, the problem comes from tabs being created in "iframes", and popovers can't be displayed out of its "iframe".
有什么办法可以解决这个问题吗？ （=即使靠近标签的边框也能正确显示弹出框？）
Is there any way I could resolve this problem? (= displaying correctly the popover even when close to tab's border ?)
非常感谢！
下面是显示我的问题的示例代码（准备复制/粘贴.html http://jsfiddle.net/7PU2D/）：
Below is a sample code showing my problem (ready to copy/paste in a .html http://jsfiddle.net/7PU2D/):
<!DOCTYPE html>
<head>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="span2">
Left column
</div>
<div class="span6">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">tab1</a></li>
<li><a href="#tab2" data-toggle="tab">tab2</a></li>
<li><a href="#tab3" data-toggle="tab">tab3</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane active">tab1 text
<div class="well">
<a href="#" class="btn btn-danger" rel="popover" style="position: relative;" data-content="And here's some amazing content. It's very engaging. right? " data-original-title="A Title">hover for popover</a>
</div>
</div>
<div id="tab2" class="tab-pane">tab2 text</div>
<div id="tab3" class="tab-pane">tab3 taxt</div>
</div>
</div>
</div>
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<script>
$(function(){
$('a[rel=popover]').popover({
trigger: 'hover',
placement: 'in bottom',
animate: true,
delay: 500,
});
});
</script>
</body>
推荐答案
标签内容div的css属性 overflow 设置为 auto （通过Bootstrap）。这意味着当内容的大小超过div的大小时，浏览器会添加滚动条并剪切内容。您可以在自己的一个css文件中将属性覆盖为默认值（ visible ），或者只使用这样的内联样式：
The tab content div has the css property overflow set to auto (by Bootstrap). This means that when the size of the content exceeds the size of the div, the browser adds a scrollbar and clips the content. You can overwrite the property to its default (visible) in one of your own css files, or just by using inline styles like this:
<div class="tab-content" style="overflow: visible;">
示例： http://jsfiddle.net/grc4/BXmC3/
这篇关于Bootstrap tabbable和popover之间的冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
