Блог

Я просмотрел все другие связанные сообщения BS3 в отношении выравнивания высоты для всех столбцов сетки, но, похоже, ничто из этого не помогает в моем конкретном сценарии.

Проблема:

Я использую BS 3 для проекта и имею 1 строку с 4-кратным разделением карт. у каждого раздела карты есть тело и нижний колонтитул, где, поскольку количество текста в теле отличается для каждой карты, но у всех один и тот же нижний колонтитул. Чего я хочу добиться, так это установить высоту тела ВСЕХ столбцов на значение самого высокого столбца, чтобы все они выглядели одинаково, независимо от объема текста в теле.

Что я пробовал:

• использование flex, но, похоже, не работает на BS3

    .row.equal {
    display: flex;
    flex-wrap: wrap;
  }
   

• отрицательное заполнение и поля, применяемые к row card card-body элементам и
• перепутал сторонний CSS, который предположительно работает flex на BS3, но также не сработал

HTML:

 <!-- Content area -->
<div class="content">

    <!-- Inner container -->
    <div class="d-flex align-items-start flex-column flex-md-row">

        <!-- Left content -->
        <div class="w-100 overflow-auto order-2 order-md-1">

            <!-- Grid -->
            <div class="row">

                <div class="col-xl-3 col-sm-6">
                    <div class="card">
                        <div class="card-body">
                            <div class="card-img-actions">
                                <a href="./gallery/IMG_' . $row['image_id'] . '.jpeg" data-lightbox="Modeabverkauf" class="md-opjjpmhoiojifppkkcdabiobhakljdgm_doc">
                                    <img src="./gallery/thumbs/IMG_' . $row['image_id'] . '.jpeg" class="card-img" width="96" alt="' . $row['image_id'] . '">
                                    <span class="card-img-actions-overlay card-img">
                                        <i class="icon-ico-plus icon-2x"></i>
                                    </span>
                                </a>
                            </div>
                        </div>

                        <div class="card-body bg-light text-center">
                            <div class="mb-2">
                                <h6 class="font-weight-semibold mb-0">
                                    <div class="text-default">' . $row['type'] . ' [#' . $row['image_id'] . ']</div>
                                </h6>

                                <div class="text-muted">
                                    Label: ' . $row['label'] . '
                                </div>
                                <div class="text-muted">
                                    amp;nbsp;
                                </div>
                                <div class="text-muted">
                                    <i>' . utf8_encode($row['description']) . '</i>
                                </div>
                            </div>

                            <h3 class="mb-0 font-weight-semibold">' . $price . '</h3>

                            <div class="text-muted mb-3">
                                    Grösse(n): ' . $row['size'] . '<br>
                                    Farbe(n): ' . $row['color'] . '<br>
                                    Anzahl: ' . $row['quantity'] . '
                            </div>
                        </div>
                        <div class="card-footer bg-light text-center">
                            <button id="btn_' . $row['image_id'] . '" name="btn_' . $row['image_id'] . '" type="button" class="btn bg-teal-400" data-toggle="modal" data-target="#modal_contact_form"><span class="icon-ico-mail4"></span>  Anfragen</button>
                        </div>
                    </div>
                </div>
 

Ценю любую помощь в этом, спасибо.

Трудно воспроизвести проблему только с частичным HTML и без ссылки на вашу версию таблицы стилей BS3 и js script. В любом случае, по моему опыту, одно (или несколько) из следующего должно быть решено.

Попробуйте:

 .card {min-height:300px}
 

или, что более вероятно:

 .w-100 .col-xl-3, .w-100 .col-sm-6 {min-height:300px}
 

Вместо 300px этого введите максимальное значение высоты ячеек столбца ( col-xl-3 / col-sm-6 ), которое вы можете получить из консоли вашего браузера. Например, если height размер ячеек вашего продукта варьируется от 381 пикселей до 412 пикселей, используйте min-height:412px . Настройте это значение для каждого из ваших медиазапросов CSS.

Именно так я решал ту же проблему на BS3 довольно много раз в прошлом. Пожалуйста, прокомментируйте, применимо это или нет! 🙂