下推行的悬停文本过渡 (Bootstrap)

Question

我正在努力寻找我的 col-sm-4 项目在过渡期间被下推的原因。

类属性中一定存在冲突，导致每个框的高度过高。

已编辑：页面现已更改。这个问题是 Bootstrap 3 和包装元素的常见错误，导致行具有不同的高度。

Answer 1

好的，我让它正常工作。正如我在评论中提到的，您不尊重框模型语义并将您的margin-bottom 应用于.cat-post-container，这是.col-sm-4 的内部元素。如果你这样做，它会起作用：

.col-sm-4 {
    margin-bottom: 20px;
}

.cat-post-container {
    // margin-bottom: 20px; *remove this rule*
}

另外，由于您的盒子的功能类似于链接，您应该将.col-sm-4 a 设置为显示块以覆盖内容区域作为块容器。

.col-sm-4 > a {
    display: block;
}