如何用bootstrap覆蓋陰影？

Question

起初，Imma是一個noobie在CSS中，只知道基地。 我需要在右側添加幾張牌。我做了它，但正如你可以看到下面的影子不覆蓋另一張牌。我找到了使用absolute位置的解決方案，但我需要使用引導程序在小屏幕上重新組合。 這是我的佈局，在這一刻：

.pm-tile { 
 
    height: 100px; 
 
    padding: 8px; 
 
    background-color: rgb(238, 238, 238); 
 
    border: 1px solid rgba(255, 255, 255, 0.30); 
 
    z-index: 1; 
 
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
 
    transition: all 0.3s cubic-bezier(.25,.8,.25,1); 
 
} 
 

 
.pm-tile:hover { 
 
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 
 
    z-index: 3; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-11"></div> 
 
     <div class="col-md-1"> 
 
     <div class="row pm-tile">Test 1</div> 
 
     <div class="row pm-tile">Test 2</div> 
 
     <div class="row pm-tile">Test 3</div> 
 
     <div class="row pm-tile">Test 4</div> 
 
    </div> 
 
    </div> 
 
</div>

P. S.我怎樣才能使用引導的DIV表呢？或者只有 absolute職位屬性纔有可能。

Answer 1

如果你添加你的：hover僞類的位置：relative;那麼你可以得到你正在尋找的效果。

.pm-tile { 
 
    height: 100px; 
 
    padding: 8px; 
 
    background-color: rgb(238, 238, 238); 
 
    border: 1px solid rgba(255, 255, 255, 0.30); 
 
    z-index: 1; 
 
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
 
    transition: all 0.3s cubic-bezier(.25,.8,.25,1); 
 
} 
 

 
.pm-tile:hover { 
 
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 
 
    position:relative; 
 
    z-index: 3; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-11"></div> 
 
     <div class="col-md-1"> 
 
     <div class="row pm-tile">Test 1</div> 
 
     <div class="row pm-tile">Test 2</div> 
 
     <div class="row pm-tile">Test 3</div> 
 
     <div class="row pm-tile">Test 4</div> 
 
    </div> 
 
    </div> 
 
</div>