引导程序clearfix不起作用.镀铬布局中的孔

Question

嘿，伙计们，我在bootstrap 3中创建了自己的自定义卡，因为我需要支持相当旧的浏览器，但还不能升级到bootstrap 4。卡片上有一段视频。一个标题和一个按钮。这是卡片的css。

.card{width: 100%; margin-bottom: 30px; box-shadow: 0 0 5px; padding: 15px; background-color: white;}
.card video{width:100%;}
.card-title{font-weight: bold;}

我比这个模板页面有一个简单的col-md-4布局。我使用vuejs循环遍历从数据库中获得的数组

<style>
.categoryButtonSelected{background-color: #1c71b9 !important; color: white !important;}
.headertitle{text-align: center; margin: 0; padding: 0;}
</style>
<?php
require_once('database.php');
if ($result = $mysqli->query("SELECT t.*, GROUP_CONCAT(c.category) categories, GROUP_CONCAT(k.keyword) keywords FROM dataclayTemplates t LEFT JOIN dataclayCategoryLink cl JOIN dataclayCategories c ON cl.categoryId=c.id ON t.id=cl.templateId LEFT JOIN dataclayKeywordLink kl JOIN dataclayKeywords k ON kl.keywordId=k.id ON t.id=kl.templateId GROUP BY t.id"))
{
while($row = $result->fetch_array(MYSQL_ASSOC)) {
if($row["categories"] == null) {
$row["categoryArray"] = [];
} else {
$row["categoryArray"] = array_unique(explode(",",$row["categories"]));
}
unset($row["categories"]);
if($row["keywords"] == null) {
$row["keywordArray"] = [];
} else {
$row["keywordArray"] = array_unique(explode(",",$row["keywords"]));
}
unset($row["keywords"]);
$templateArray[] = $row;
}
}
$result->close();
$categoryArray = array();
if ($result = $mysqli->query("SELECT category FROM creative_engine.dataclayCategories;"))
{
while($row = $result->fetch_array(MYSQL_ASSOC)) {
array_push($categoryArray, $row['category']);
}
}
$result->close();
$keywordArray = array();
if ($result = $mysqli->query("SELECT keyword FROM creative_engine.dataclayKeywords;"))
{
while($row = $result->fetch_array(MYSQL_ASSOC)) {
array_push($keywordArray, $row['keyword']);
}
}
$result->close();
$mysqli->close();
include('header.php');
?>
<div v-cloak id="templates" class="container">
<div class="row"><h1 class="headertitle">Creative Engine Templates</h1></div>
<div class="row">
<div v-cloak v-bind:key="template.itemId + '_' + index" v-for="(template, index) in searchResults" class="col-md-4">
<div class="card">
<video muted :src="'CreativeEngine/'+template.itemId+'/'+template.thumbName+'.mp4'" controls preload="none" controlsList="nodownload nofullscreen" :poster="'CreativeEngine/'+template.itemId+'/'+template.thumbName+'.jpg'" loop="loop"></video>
<div class="card-body">
<p class="card-title">{{template.itemName}}</p><!--end card-title-->
<p v-show="displaycount==0" class="card-text">Please create a display to customize</p><!--end user has no display card-text-->
<p v-show="displaycount>0" class="card-text">Custom Text, Custom Colors, Upload Logo</p><!--end user has display card text-->
<p class="card-text">{{template.renderTime}} minutes</p>
<a href="#" v-show="loggedin==1 && displaycount>0" class="btn btn-primary btn-block">Customize</a><!--logged in and has display button-->
<a href="#" v-show="loggedin==0" class="btn btn-primary btn-block" disabled>Customize</a><!--not logged in button-->
<a href="getCustomer.php?showAddDisplayForm=1" v-show="loggedin==1 && displaycount==0" class="btn btn-primary btn-block">Create A Display</a>
</div><!--end card-body-->
</div><!--end card-->
</div><!-- end col-md-4-->
</div><!--end row-->
</div><!--end templates app-->

我已经尝试了clearfixes和我能想到的几乎所有东西，但我一直在我的布局中的第六张卡上获得完整的结果，就像这样(这只发生在chrome上，而edge和firefox工作正常图片痴呆问题

如果我做错了，或者有人有任何想法，请告诉我

Answer 1

/*Cards*/
.card{width: 100%; margin-bottom: 30px; box-shadow: 0 0 5px; padding: 15px; background-color: white;}
.card video{width:100%;}
.card-title{font-weight: bold;}
@media only screen and (max-width : 3840px) {
.card video {height: 150px;}
}
@media only screen and (max-width : 990px) {
.card video {height: auto;}
}

为了解决这个问题，我不得不输入媒体查询并设置一个高度，然后在达到一定的屏幕大小后将其设置为自动