引导3覆盖标题未正确对齐

Question

我已经在bootstrap中创建了pintrest样式的网格，并希望在右上角和底部显示覆盖标题文本。

但是，正如您在演示中看到的，我的右上角标签对齐不对齐，对于底部文本也是一样的。

即使我用多行写文字，也不太适合。我希望像下面的图像那样显示毫线文本

​

​

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

那么我在这里应该调整什么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/