gpt4 book ai didi

jquery - Bootstrap 2.2.1 中的弹出框

转载 作者:太空宇宙 更新时间:2023-11-03 18:56:46 26 4
gpt4 key购买 nike

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

但是好像不行。当我将弹出窗口放在设置了溢出样式属性的 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();
});​

最佳答案

问题来自 overflow-x: scroll;overflow-y: hidden; in your CSS..

应该是

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

关于jquery - Bootstrap 2.2.1 中的弹出框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13267272/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com