html - Bootstrap 覆盖列表组

Question

我正在尝试使用 Bootstrap 列表和叠加层为模型提供一个有效的按钮幻灯片。我想让它看起来像按钮是从右边进来的。 Here 是我想做的事情的代码。我正在尝试给 li 元素一个正的相对值和 z-index，这样它就在 .pull-right div 的“上方”。

知道我该怎么做才能让它发挥作用吗？标记为 Test 的按钮看起来应该是从右边进入的，因此一半的文本应该可见，另一半应该不可见。

Answer 1

根据我的理解，我认为您可能需要隐藏 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