当我将滚动条添加到弹出窗口时,bootstrap popover箭头消失了

时间:2013-07-30 05:55:36

标签: css twitter-bootstrap

当没有滚动条时我得到箭头但是当我向滚动条内容添加滚动条时它会消失。 我无法让它在jsfiddle上运行。所以我在这里发布代码。

CSS

.pop-div .popover {
    max-width: 310px;
    height: 250px;
    overflow-y:scroll;
}

HTML

<li>
    <div class="pop-div">
        <a href="#" id="myid" rel="popover" >click me</a>
    </div>
</li>

JAVASCRIPT

$("a[rel=popover]").click(function(e) {
    e.preventDefault();
    $.ajax({
        url: '/myurl',
        success: function(data) {
            $("#myid").popover({
                placement: 'top',
                title:'title',
                html:true,
                content:data
            });
        }
    });
 });

2 个答案:

答案 0 :(得分:6)

那是因为箭头应该出现在popover下面,但是因为你告诉它要垂直滚动,所以它不能“脱离”父级。我建议你使用Bootstrap提供的.popover-content类来启用仅内部内容的滚动

<强> CSS

.pop-div .popover-content {
    max-width: 310px;
    height: 250px;
    overflow-y:scroll;
}

<强> Demo fiddle

答案 1 :(得分:0)

我添加了溢出:自动添加到popover-content和max-width:100%以便弹出它对我来说效果很好

.popover .popover-content {

溢出:自动; }