bootstrap覆盖列表组

我试图给一个按钮幻灯片效果只是模拟使用引导列表和覆盖。我想让它看起来像按钮从右侧进入。 Here是我试图做什么的代码。我试图给李元素一个正面的相对和z-索引，所以它是“在”之上。bootstrap覆盖列表组

任何想法，我可以做这个工作？标记为Test的按钮应该看起来像从右侧进入，因此文本的一半应该可见，一半应该不可见。

来源

2015-10-14 Tarang Hirani

你能否详述一下？所以按钮从右侧移动（移动）？什么是移动的触发器（在文档加载，列表鼠标悬停等）？ Bootstrap不提供动画，您可以使用css动画或jQuery。 – Lauwrentius

我现在不需要担心动画。只需要按钮相对于li元素是隐藏的。 –

好吧，难道你不能只用负右边距设置移动元素吗？然后，当触发时，重置保证金 – designarti

按我的理解，我认为你可能有隐藏的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

来源

2015-10-14 04:52:49

bootstrap覆盖列表组

回答

相关问题