引导清除修复不起作用。布局镀铬中的孔

Posted 2023-03-04

【中文标题】引导清除修复不起作用。布局镀铬中的孔

【英文标题】：bootstrap clearfix not working. Holes in layout chrome

【发布时间】：2018-12-22 00:55:05

【问题描述】：

大家好，我在 bootstrap 3 中创建了自己的自定义卡片，因为我需要支持相当旧的浏览器，并且还不能升级到 bootstrap 4。卡片中有视频。一个标题和一个按钮。这是卡片的 CSS。

.cardwidth: 100%; margin-bottom: 30px; box-shadow: 0 0 5px; padding: 15px; background-color: white;
        .card videowidth:100%;
        .card-titlefont-weight: bold;

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

<style>
    .categoryButtonSelectedbackground-color: #1c71b9 !important; color: white !important;
    .headertitletext-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 工作正常 Picture demenstrating problem

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

【问题讨论】：

问题是因为你的视频图像高度。为所有视频图像设置共同的最大高度。

这适用于第一个断点，但比其他断点更糟

【参考方案1】：

/*Cards*/
.cardwidth: 100%; margin-bottom: 30px; box-shadow: 0 0 5px; padding: 15px; background-color: white;
.card videowidth:100%;
.card-titlefont-weight: bold;

@media only screen and (max-width : 3840px) 
.card video height: 150px;


@media only screen and (max-width : 990px) 
.card video height: auto;

为了解决这个问题，我必须放入媒体查询并设置一个高度，然后在达到特定屏幕尺寸后将其设置为自动