如何使并排卡片中的嵌套行具有相同的高度？

Question

我有两张包含动态内容的嵌套行的并排卡片，我希望第一张卡片的第一行与第二张卡片的第一行高度相同，第二行第一张卡片与第二张卡片的第二行高度相同，依此类推

我希望按以下方式计算高度：A1 的高度 = max（A1 的高度，A2 的高度），A2 的高度 = max（A1 的高度，A2 的高度），A2 的高度B1 = max(B1高度, B2高度), B2高度= max(B1高度, B2高度).

这是我的代码：

<div class="row">
    <div class="col-lg-6 mb-3">
        <div class="card">
            <div class="card-body">
                <div id="a1" class="row">
                    ...
                </div>
                <div id="b1" class="row">
                    ...
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-6 mb-3">
        <div class="card">
            <div class="card-body">
                <div id="a2" class="row">
                    ...
                </div>
                <div id="b2" class="row">
                    ...
                </div>
            </div>
        </div>
    </div>
</div>

这是我目前拥有的：

这就是我想要的：

如何仅使用 Bootstrap 4 和 CSS 来执行此操作？

Answer 1

我可以使用 jQuery ,

var maxHeight = function(elems){
    return Math.max.apply(null, elems.map(function ()
    {
        return $(this).height();
    }).get());
}

 $('.a').css('height',maxHeight($(".a")));
 $('.b').css('height',maxHeight($(".b")));

.col-6{
  border:1px solid black;
  padding:5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row p-2">
  <div class="col-6">
    <div class="row match-height">
      <div class="col-12 ">
        <div class="card a">
          <div class="card-body">
            #A1
            <br>
            Extraa
          </div>
        </div>
      </div>
    </div>
    <div class="row match-height">
      <div class="col-12 ">
        <div class="card b">
          <div class="card-body">
            #B1
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-6">
    <div class="row match-height">
      <div class="col-12">
        <div class="card a">
          <div class="card-body">
            #A2
          </div>
        </div>
      </div>
    </div>
    <div class="row match-height">
      <div class="col-12">
        <div class="card b">
          <div class="card-body">
            #B2
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

你不会用 Bootstrap 卡片来做这件事。您需要在 CSS 网格上使用自定义边框来伪造它们，其中一张卡片跨越两行。您还必须放弃包装元素，因为它们会干扰行的流动。

此外，如果您希望“卡片”在移动设备上堆叠，您需要在所需的断点处使用媒体查询撤消它（Bootstrap 是 mobile-first，所以我们应该以及我们的风格）。我在 992px 处这样做了，这是 Bootstrap 的“大”，以匹配您实施的列类。请参阅移动布局的标准演示和桌面布局的完整页面演示。请注意，在移动设备上不会出现额外的空格，我认为这是合适的。

遗憾的是，Bootstrap 4 不提供 CSS 网格，因此我们将使用自定义样式。好消息是我们会维护您文档内容的正确语义顺序。相关内容还在。如果您使用标题和段落进一步组织，它将很容易访问。

.grid>div {
  margin: 1rem;
  padding: 1rem;
  border: 1px solid rgba(0, 0, 0, .125);
}

.grid> :nth-child(odd) {
  border-bottom: 0;
  border-radius: 0.25rem 0.25rem 0 0;
  margin-bottom: 0;
  background: rgba(255, 0, 0, 0.1); /* for demo only */
}

.grid> :nth-child(even) {
  border-top: 0;
  border-radius: 0 0 0.25rem 0.25rem;
  margin-top: 0;
}

@media (min-width: 992px) {
  .grid {
    display: grid;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="grid">
  <div id="a1">
    A1: I have two side-by-side cards with nested rows that contain dynamic content.
  </div>

  <div id="b1">
    B1: I want the first row of the first card to be the same height as the first row of the second card, the second row of the first card to be the same height at the second row of the second card, etc. I would want the heights to be calculated in the following
    way.
  </div>

  <div id="a2">
    A2: I want the first row of the first card to be the same height as the first row of the second card, the second row of the first card to be the same height at the second row of the second card, etc.
  </div>

  <div id="b2">
    B2: I have two side-by-side cards with nested rows that contain dynamic content.
  </div>
</div>

如何使并排卡片中的嵌套行具有相同的高度？

How to make nested rows in side-by-side cards the same height?

html

css

twitter-bootstrap

bootstrap-4