Bootstrap clearfix не работает. Отверстия в макете хром

Привет, ребята, я создал свои собственные карты в 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 работают нормально Изображение проблемы деменстрации

Если я делаю это неправильно или у кого-то есть идеи, дайте мне знать

Проблема в том, что высота вашего видеоизображения. Установите общую максимальную высоту для всего видеоизображения.

Nawin 13.07.2018 17:47

Это работает для первой точки останова, но затем с другими

codernoob6 13.07.2018 18:02
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Symfony Station Communiqué - 7 июля 2023 г
Symfony Station Communiqué - 7 июля 2023 г
Это коммюнике первоначально появилось на Symfony Station .
Оживление вашего приложения Laravel: Понимание режима обслуживания
Оживление вашего приложения Laravel: Понимание режима обслуживания
Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...
Установка и настройка Nginx и PHP на Ubuntu-сервере
Установка и настройка Nginx и PHP на Ubuntu-сервере
В этот раз я сделаю руководство по установке и настройке nginx и php на Ubuntu OS.
Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...
Как установить PHP на Mac
Как установить PHP на Mac
PHP - это популярный язык программирования, который используется для разработки веб-приложений. Если вы используете Mac и хотите разрабатывать...
0
2
150
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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;}
}

чтобы решить эту проблему, мне пришлось ввести медиа-запросы и установить высоту, а затем установить ее на автоматический, как только он достиг определенного размера экрана

Другие вопросы по теме