Bootstrap 3 popover滚动不起作用

时间:2014-01-29 12:32:34

标签: javascript html css twitter-bootstrap popover

HTML

<div class="pop-div">
    <a href="#" data-toggle="popover" title="<strong>Notifiche</strong>" data-html="true" data-content="Notification 1<hr />Notification 2<hr />Notification 3 <hr />Notification 4">Notifications</a>
    </div>

JAVASCRIPT

$('[data-toggle="popover"]').popover({placement: 'bottom'});

        //hide popover when click outside
        $('body').on('click', function (e) {
            $('[data-toggle="popover"]').each(function () {
                if ($(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                    $(this).popover('hide');
                }
            });
        });

CSS

.pop-div .popover-content {
height: 50px;
overflow-y: scroll;

}

我在上面的代码中有这个popover。我正在尝试在弹出窗口内容的左侧显示滚动条,但此代码不起作用。 任何帮助将不胜感激。 谢谢!

1 个答案:

答案 0 :(得分:7)

这是因为你的CSS声明是错误的。您应该使用逗号,分隔选择器:

.pop-div, .popover-content {

不是

.pop-div .popover-content {

在这种情况下,.pop-div是无关紧要的,您只需要

.popover-content {
   height: 50px;
   overflow-y: scroll;
}

看小提琴 - &gt;的 http://jsfiddle.net/tv5Vu/