我有兩張并排的卡片，其中包含動態內容的嵌套行，我希望第一張卡片的第一行與第二張卡片的第一行高度相同，第一張卡片的第二行是第二張卡片的第二行高度相同，依此類推。
我希望通過以下方式計算高度：A1 的高度 = 最大值（A1 的高度，A2 的高度），A2 的高度 = 最大值（A1 的高度，A2 的高度），B1 的高度 = 最大值（高度B1 的高度，B2 的高度），B2 的高度 = 最大值（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 來做到這一點？
uj5u.com熱心網友回復：
您不會使用 Bootstrap 卡來執行此操作。您需要使用 CSS 網格上的自定義邊框來偽造它們，其中一張卡片跨越兩行。您還必須放棄包裝元素，因為它們會干擾行的流動。
此外，如果您希望“卡片”在移動設備上堆疊，您需要在您想要的斷點處使用媒體查詢來撤消它（Bootstrap 是移動優先的，所以我們也應該使用我們的樣式）。我在 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/[email protected]/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>uj5u.com熱心網友回復：
我可以使用 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/473111.html
下一篇：不知道如何更改html的背景