1

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

但这似乎不起作用。当我将弹出框放在设置了溢出样式属性的 div 中时。

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

你可以在这个 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();
});​
4

1 回答 1

0

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

它应该是

#listCartridges > ul {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
}
于 2012-11-07T12:02:40.260 回答