Bootstrap中的Popovers 2.2.1

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

但它似乎没有工作。当我把弹出窗口放在一个具有溢出风格属性的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(); 
});

来源

2012-11-07 subzero

看看这里，我有同样的问题。 https://github.com/twitter/bootstrap/issues/5889#issuecomment-10290776 – Mike

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

应该

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

来源

2012-11-07 12:02:40

我知道问题来自溢出。我无法摆脱这一点。这些部门需要设置overflow-x和overflow-y。我想知道的是，如果有解决方法？ – subzero

Bootstrap中的Popovers 2.2.1

回答

相关问题