我使用hovercard显示用户的小的外形卡。在这个hovercard中,我试图包含一个Twitter Bootstrap下拉按钮。引导下拉按钮中的名片
按钮被包含在HTML和CSS的工作正常(与实际JavaScript来打开下拉一起)。问题是无法看到下拉菜单。
看看一个更好的解释图像:
第二个例子是名片默认结果。正如你所看到的,下拉菜单的一小部分正在显示,但由于某些原因,它正被隐藏卡片框的边界所隐藏。
在第1例中,我删除默认的引导CSS位置选项,下拉继承的静态位置。使用静态时,可以看到菜单,但它增加了悬停卡盒的大小。
我需要发生的事情是,当胡萝卜被点击时,下拉框/列表打开悬停卡的“顶部”,不扩展悬停卡的尺寸,而是让下拉菜单作为自己的对象尺寸。
顺便说一句 - 我已经检查两个z指数的名片中的,并且下拉,并且下拉的Z-指数越高,这样不应该成为问题。
编辑: 实际示例标记
<div class="hc-preview" style="z-index: 0; "><a class="profilecard hc-name" rel="hovercard" data-type="custom" data-width="370" data-url="/omega/ajaxProfile/ProfileCard?eid=1" href="/omega/profile/profile/view/id/1" style="z-index: 0; "><img class="avatar thumb" src="/omega/images/1_darth-maul.png" alt="Avatar"></a><div class="hc-details" style="width: 370px; background-color: rgb(255, 255, 255); display: none; background-position: initial initial; background-repeat: initial initial; "><div class="s-card s-card-pad"><link rel="stylesheet" type="text/css" href="/omega/assets/5583cf06/css/bootstrap-yii.css">
<div class="hovercard">
<img class="thumb align-left" src="/omega/images/1_darth-maul.png" alt="Paul Johesphat"><h1>
Paul Johesphat<span class="badge badge-success" rel="tooltip" data-original-title="This person is an expert in our community">Expert</span></h1>
<h2>Advisor</h2>
<h2>
</h2>
<div class="clearfix"></div>
<div style="float:right; display:block;">
<div id="loading"></div>
<div id="connect-button1">
<div class="btn-group open">
<button class="btn"><i class="icon-ok"></i> Friend</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<span class="instruct">Add to List:</span>
</li>
<li class="divider"></li>
<div id="list">
<li>
<a href="#" id="yt0">Acquaintance</a></li>
<li>
<a href="#" id="yt1">Close Friend</a></li>
<li>
<a href="#" id="yt2">Colleague</a></li>
<li>
<a href="#" id="yt3">Prospect</a></li>
</div>
<li class="divider"></li>
<li><a id="1" class="remove" href="/omega/friendship/friendship/removerequest">Remove Connection Request</a></li>
</ul>
</div></div></div></div></div></div></div>
尝试使用'.dropup'类'.pull-right'组合([见DOC](http://twitter.github.com/bootstrap/components.html#buttonDropdowns))。或者你可以尝试导出vcard外的菜单。提供一些生成的html来获得工作示例。 – Sherbrow 2012-07-30 18:52:20
Sherbrow,我尝试了dropup并拉右,但不幸的是发生了同样的问题(除了这个时候,悬停卡框边界切断了列表),它在顶部边界而不是底部切断它。我已经使用生成的实际代码更新了我的帖子。 – w00tw00t111 2012-07-30 19:29:44
为'.btn-group'设置'position:absolute;'。 – Oleg 2012-08-08 14:17:41