Question

我正在尝试在我的应用中使用Bootstrap popover元素。

但它似乎不起作用。当我把popovers放在一个设置了溢出样式属性的div中。

但是，相同的代码曾用于以前的bootstrap版本。

你可以在这个jsFiddle中看到我的意思 jsFiddle

这里出了什么问题？

以下是相关代码 -

HTML -

   <body>
       <a href="#"  rel="popover" data-content="test" data-original-title="hello" style="position: absolute; top: 300px; left: 300px;">This works</a>
   <div id="cartridges">
       <div class="relative">
           <div id="listCartridges">
               <ul>
                   <li>
                       <a href="#"  rel="popover" data-content="test" data-original-title="hello">This doesnt work</a>
                   </li>
                   <li>
                       <a href="#"  rel="popover" data-content="test" data-original-title="hello">This doesnt work</a>
                   </li>
                   <li>
                       <a href="#"  rel="popover" data-content="test" data-original-title="hello">This doesnt work</a>
                   </li>
                   <li>
                       <a href="#"  rel="popover" data-content="test" data-original-title="hello">This doesnt work</a>
                   </li>
                   <li>
                       <a href="#"  rel="popover" data-content="test" data-original-title="hello">This doesnt work</a>
                   </li>
                   <li>
                       <a href="#"  rel="popover" data-content="test" data-original-title="hello">This doesnt work</a>
                   </li>
               </ul>
           </div>
       </div>
   </div>
                   </body>

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 -

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

Answer 1

问题来自CSS中的overflow-x: scroll;overflow-y: hidden; ..

应该是

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

Bootstrap 2.2.1中的弹出窗口

1 个答案: