引導3疊加字幕不對齊正確

Question

我在bootstrap創建pintrest風格的網格和我想在右上角和底部

顯示疊加字幕文本，但你可以在這裏demo見我的右上角的標籤沒有正確對齊，底部文字也一樣

即使我用多行寫文本也不適合。我想miltiline文本要顯示這樣下面的圖片

也要根據圖像，以適應電網，現在它給出了圖像寬度後一些額外的寬度。

那麼css屬性應該在這裏調整？

Answer 1

CSS

.row { 
    -moz-column-width: 18em; 
    -webkit-column-width: 18em; 
    -moz-column-gap: 1em; 
    -webkit-column-gap:1em; 
} 
.item { 
    display: inline-block; 
    width: 100%; 
} 
.well { 
    position:relative; 
    display: block; 
    padding: 0; 
} 
.well span { 
    position: absolute; 
    right: 0; 
    top: 0; 
    padding:1%; 
    color: #fff; 
    background:rgba(0, 0, 0, 0.50); 
} 
.well h4 { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    margin: 0; 
    padding:1%; 
    color: #fff; 
    background:rgba(0, 0, 0, 0.50); 
    width: 100%; 
    padding: 15px; 
} 

對於全寬，在每個項目上的封面圖片，添加width:100%到<img/>元件。

.well img { 
    width:100%; 
} 

演示：https://jsfiddle.net/9dz3xxe9/1/