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

回答

相關問題