如何在Bootstrap 3（OpenCart 2.1）中实现产品块全屏高度

我正在使用基于Bootstrap 3的OpenCart 2.1，尝试通过自定义CSS实现产品块全屏高度，但当前设置未生效，效果如下：

现有代码 #

HTML代码 #

<div class="row equal">
    <div class="product-layout product-grid col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="product-thumb">
            <div class="image"></div>
            <div class="caption"></div>
        </div>
    </div>
</div>

CSS代码 #

.row .equal {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}

.equal > [class*='col-'] {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.equal > [class*='col-'] > * {
    display: flex;
    flex-wrap: wrap;
}

问题分析与修正方案 #

原CSS存在两个核心问题：

1. 选择器错误：.row .equal会匹配.row内部的.equal元素，但你的容器是同时拥有row和equal类的单个元素，正确选择器应为.row.equal。
2. 未设置产品卡片的高度填充：仅给列设置flex布局不够，需要让.product-thumb填充列的剩余高度，同时调整内部元素布局确保内容撑满。

修改后的CSS代码：

/* 正确应用flex布局到.row.equal容器 */
.row.equal {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}

.equal > [class*='col-'] {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

/* 让产品卡片占满列的高度 */
.equal > [class*='col-'] .product-thumb {
    display: flex;
    flex-direction: column;
    flex: 1; /* 填充列的剩余高度 */
}

/* 让标题区域自动拉伸，底部元素固定在卡片底部（如果有按钮等元素可加此规则） */
.equal .product-thumb .caption {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* 若存在按钮组，将其固定在卡片底部 */
.equal .product-thumb .button-group {
    margin-top: auto;
}

说明 #

• 修正选择器后，flex布局会正确作用于产品行容器。
• flex:1属性让.product-thumb自动填充列的高度，确保所有产品块高度一致。
• 若产品卡片底部有按钮等元素，通过margin-top:auto可让其固定在卡片底部，优化视觉效果。

内容的提问来源于stack exchange，提问作者Володимир К