Bootstrap 3 - 应用于 div-body 的 4 列的相同高度

Question

关于对齐所有网格列的高度，我浏览了所有其他相关的 BS3 帖子，但这些似乎都对我的特定场景没有帮助。

问题：

我正在为一个项目运行 BS 3，并且有 1x 行和 4x 卡 div。每个卡片 div 都有一个正文和页脚，因为每个卡片正文中的文本数量不同，但都具有相同的页脚。 我想要实现的是将所有列的正文高度设置为最高列的值，这样无论正文中的文本数量如何，它们看起来都一样。

我的尝试：

• 使用 flex，但似乎不适用于 BS3

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

• negative padding and margins 应用于 row、card 和 card-body 元素

• 搞砸了第三方 CSS，据说它在 BS3 上运行 flex，但也没有成功

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">
                                    &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>

感谢您对此的任何帮助，谢谢。

Answer 1

只有部分 HTML 并且没有链接到您的 BS3 样式表和 js 脚本版本，很难重现该问题。无论如何，根据我的经验，以下一项（或多项）应该可以解决。

试试：

.card {min-height:300px}

或者，更有可能：

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

输入可以从浏览器控制台获取的列单元格高度的最大值 (col-xl-3/col-sm-6)，而不是 300px。例如，如果您的产品单元格的 height 范围从 381px 到 412px，请使用 min-height:412px。为每个 CSS 媒体查询调整此值。

这就是我过去很多次在BS3上处理相同问题的方式。请评论这是否适用！ :)