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 に答える