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

Question

我浏览了所有其他关于对齐所有网格列高度的相关 BS3 帖子，但是 none 这似乎对我的特定情况有所帮助。

问题：

我是一个项目的运行 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

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

尝试：

.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 范围为 381px 到 412px，请使用 min-height:412px。为每个 CSS 媒体查询调整此值。

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

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

Bootstrap 3 - same height for 4 columns applied to div-body

html

css

flexbox

twitter-bootstrap

twitter-bootstrap-3