当我给弹出窗口添加滚动条时，Bootstrap 弹出箭头消失了。

Question

当弹出内容没有滚动条时，我会得到箭头，但是当我添加滚动条到弹出内容中后，箭头会消失。 我在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
            });
        }
    });
 });

- user1298426

---

这真的很令人伤心:(，但如果你想要帮助，最好展示一下你具体做了什么。http://jsfiddle.net/。同时编辑你的问题，因为它会被标记为“不是一个真正的问题”，因为实际上你并没有提问。 - Loïc Faure-Lacroix

请说明您的问题并提供代码片段... - Rubyist

Answer 1

那是因为箭头应该出现在弹出框下面，但由于您要求垂直滚动，它无法“跑出”父元素。建议您使用Bootstrap提供的.popover-content类仅在内部内容上启用滚动。

CSS

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

Demo fiddle

- omma2289

---

是的，我可以在 jsfiddle 上看到它能够工作。但不幸的是，在我的机器上它无法工作。我需要做些什么？此外，我的数据非常大...这会有任何影响吗？ - user1298426

你使用的是哪个版本的Bootstrap？它在你的网站上表现如何？ - omma2289

bootstrap-popover.js v2.3.2……它按预期工作……如果我不添加滚动条，我可以看到弹出箭头，但文本会溢出……有没有其他方法来解决这个问题？ - user1298426

你能否发布一个Fiddle，展示在设置Popover内容后标记的示例？ - omma2289

我在上面的fiddle示例中看到，即使删除<div class-'popover-content'>标签...箭头仍然可见。我的fiddle将完全相同...我唯一的区别是内容。我调用了ajax请求，并将其响应显示在popover中。 - user1298426

Answer 2

我在popover-content中添加了overflow:auto属性，同时给popover设置了max-width:100%属性，这对我来说效果很好。

.popover .popover-content {

overflow: auto; }

- Rahul Kumar Jain