Bootstrap 3覆盖标题未正确对齐

Question

我在css创建了一个pintrest样式网格，我希望在右上角和底部显示叠加标题文字

但正如您在demo中所见，我的右上角标签未正确对齐且底部文字也相同

即使我在多行文字中写文字也不合适。我希望miltiline文本显示如下图像

还想根据图像调整网格，现在它在图像宽度之后给出一些额外的宽度。

那么我应该在这里调整{{1}}属性？

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/