Yii2的Matchheight扩展名不起作用

Question

我正在缩略图库中工作，该HTML代码包含在PHP foreach循环内。但是问题在于缩略图卡的高度不同。

为防止这种情况，我决定使用此extension

这是我的代码：

<div class="container">
<?php foreach($data as $key => $value) { 
    if($counter == 0) {echo '<div class="row">';}
    ?>
    <div class="col-sm-6 col-md-4 thumbnail_block">
        <div class="thumbnail"> 
            <div class="caption">
                <h3><?php echo $value['strategy_title']; ?></h3>
                <p><?php echo $value['strategy_description']; ?></p>
                <p><button class="btn btn-info" type="button">
                    Узнать больше
                </button></p>
            </div>
        </div>
    </div>

<?php 
    if($counter == 2 || $key === $last_element) {echo '</div>'; $counter = 0;} 
    else {$counter++;}
}
?>
<?php $this->registerJs('$("thumbnail_block").matchHeight();') ?>
</div>

但是没有任何效果。问题是什么？如何解决？或者也许我应该尝试寻找另一种方法来使缩略图的高度相等？

Answer 1

毕竟我用CSS来使卡片高度相等

/* CSS used here will be applied after bootstrap.css */
@media only screen and (min-width : 481px) {
    .row.equal-height {
        display: flex;
        flex-wrap: wrap;
    }
.row.equal-height > [class*='col-'] {
    display: flex;
    flex-direction: column;
}
.row.equal-height.row:after,
.row.equal-height.row:before {
    display: flex;
}

.row.equal-height > [class*='col-'] > .thumbnail,
.row.equal-height > [class*='col-'] > .thumbnail > .caption {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}
.row.equal-height > [class*='col-'] > .thumbnail > .caption > .flex-text {
    flex-grow: 1;
}
.row.equal-height > [class*='col-'] > .thumbnail > img {
    width: 100%;
    height: 200px; /* force image's height */

    /* force image fit inside it's "box" */
    -webkit-object-fit: cover;
       -moz-object-fit: cover;
        -ms-object-fit: cover;
         -o-object-fit: cover;
            object-fit: cover;
}
}

在我的yii版本中，我使用CDN加载样式，因为该站点始终位于浏览器的缓存中。我删除缓存后，一切开始工作。现在，如果我想重新加载整个站点，请按Shift + F5