悬停文本转换按下行（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;
}