bootstrap overlay list group

Question

Я пытаюсь дать эффект слайда в кнопке только для макета с использованием списков загрузки и наложений. Я хочу, чтобы он выглядел так, как будто кнопка идет справа. Here - это код для того, что я пытаюсь сделать. Я пытаюсь дать элементу li положительный относительный и z-индекс, поэтому он «выше» .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