在引导2.2.1弹窗-PopoversinBootstrap2.2.1

I am trying to use Bootstrap popover element in my app.

我尝试在我的应用程序中使用Bootstrap弹出窗口元素。

But it doesn't seem to work. When I put the popovers in a div which has the overflow style property set.

但这似乎行不通。当我把弹窗放在一个有溢出样式属性集的div中。

However, the same code used to work in the previous bootstrap version.

但是，在以前的引导版本中使用的代码也是相同的。

You can see what I mean in this jsFiddle jsFiddle

你可以看到我在这张拉小提琴上的意思。

What has gone wrong here??

哪里出了问题?

Here is the relevant code --

这是相关的代码。

HTML -

HTML—

   
       This works
   

       

           

               

                   

                       This doesnt work
                   
                   

                       This doesnt work
                   
                   

                       This doesnt work
                   
                   

                       This doesnt work
                   
                   

                       This doesnt work
                   
                   

                       This doesnt work
                   
               
           
       
   
                   

CSS --

CSS——

@import url('http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css');

body {
    background: #666;
}

#cartridges {
    position: fixed;
    overflow: visible !important;
    bottom: 0;
    left: 0
    width: 100%;
    border-top: 1px solid #AAA;
}

#cartridges > .relative {
    width: 100%;
    height: 100%;
}

#listCartridges {
    width: 100%;
    background: #222;
}

#listCartridges > ul {
    display: inline-block;
    overflow-x: scroll;
    overflow-y: hidden;
    max-width: 100%;
    white-space: nowrap;
}

#listCartridges > ul > li {
    display: inline-block;
    margin: 3px;
    padding: 3px;
    position: relative;
    vertical-align:middle;
    border: 1px solid #474747;
    overflow: none;
}

JS --

JS——

$("[rel=popover]").popover({
    animation: true,
    trigger: 'click',
    offset: 10,
    placement: 'top',
    delay: {
        show: 500,
        hide: 100
    }
}).click(function(e) {
    e.preventDefault();
});​

1 个解决方案

#listCartridges > ul {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
}