我正在尝试使用 Bootstrap 列表和叠加层为模型提供一个有效的按钮幻灯片。我想让它看起来像按钮是从右边进来的。 Here 是我想做的事情的代码。我正在尝试给 li 元素一个正的相对值和 z-index,这样它就在 .pull-right div 的“上方”。
知道我该怎么做才能让它发挥作用吗?标记为 Test 的按钮看起来应该是从右边进入的,因此一半的文本应该可见,另一半应该不可见。
最佳答案
根据我的理解,我认为您可能需要隐藏 li
所以,我在你的 html 结构中添加了一个类
<ul class="list-group">
<li class="list-group-item pos-rel overflow-x-fix">
<p class="inline-block">Test</p>
<div class="pull-right pos-abs">
<button>Text</button>
<button>Test</button>
</div>
</li>
</ul>
然后像这样更改了 CSS
inline-block{
display: inline-block;
}
.pos-rel{
position: relative;
z-index: 999;
}
.pos-abs{
position: absolute;
right: -2%;
top: 20%;
z-index: 1;
}
.overflow-x-fix {overflow-x: hidden;}
这是 example
关于html - Bootstrap 覆盖列表组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33116313/