Question

我要显示高度相同但大小不同的卡片，同时尊重Boostrap的网格。

如果我以card-deck为例：https://jsfiddle.net/sb7t5y3x/，例如，我只想将第一张卡片设置为col-6大小，对我来说，最优雅的方式应该是：

<div class="card col-6"> .... </div>

但是由于.card-deck > .card应用了flex 1，所以它不起作用。

所以我试图将卡片包装在col中：

<div class="col-6">
    <div class="card"> ... </div>
</div>

但是col有填充，而card有空白，所以我应用了2个空白（请参见https://jsfiddle.net/applyss/vcgkujxp/，空格不规则）

有没有简单的标准方法可以将具有相同高度的卡保持在网格系统中？

Answer 1

这基本上是bootstrap 4 card-deck containing cards with different width

的副本

您应该使用网格而不是卡片组。

“但是col有填充，而card有保证金，所以我有2个保证金应用..空格不是常规”

之所以会这样，是因为您没有将所有3张卡始终包裹在列中。如果需要，您可以使用spacing utility classes来调整边距或填充。

<div class="container pt-3">
    <div class="row">
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-body">
                    ..
                </div>
            </div>
        </div>
        <div class="col-md">
            <div class="card h-100">
                <div class="card-body">
                    ..
                </div>
            </div>
        </div>
        <div class="col-md">
            <div class="card h-100">
                <div class="card-body">
                    ..
                </div>
            </div>
        </div>
    </div>
</div>

演示：https://codeply.com/p/hFvvJ63Tef

Answer 2

这是一个简单的示例，显然很奇怪，但是所有div的高度都与您想要的相同。

for(j=0;j<collection;j++)
{   

xhr.open("POST", "showQuestionnaire.php",true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(document.getElementById("submitAnswers"+j).submit());
}

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

Answer 3

您想让代码像这样吗？这是拥有相同高度的简单方法

https://jsfiddle.net/g428dbLs/
height:100%;

Boostrap 4-卡片组和不同大小

3 个答案: