Boostrap 4-卡片组和不同大小 [英] Boostrap 4 - Card deck and different sizes

问题描述

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

I want to display card with same height but with different sizes, respecting Boostrap's grid.

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

If I take the example of card-deck : https://jsfiddle.net/sb7t5y3x/, I just want for example the first card to be col-6 sized, for me the most elegant way should be :

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

但是自 .card-deck>以来，它不起作用..card 应用flex 1.

But it doesn't work since .card-deck > .card applies a flex 1.

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

So I tried to wrap my cards in col :

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

但是col有填充，而card有保证金，所以我应用了2个保证金(请参阅 https://jsfiddle.net/applyss/vcgkujxp/，空格不规则)

But col have paddings, and card have margin, so I have 2 margins applied (see https://jsfiddle.net/applyss/vcgkujxp/, spaces are not regular)

在网格系统中是否有一种简单的标准方法来使卡片的高度保持不变?

Is there a simple standard way to keep cards with same height in a grid system ?

推荐答案

这基本上是您应该使用网格而不是卡片组.

You should use the grid instead of the card-deck.

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

"But col have paddings, and card have margin, so I have 2 margins applied, .. spaces are not regular"

之所以发生这种情况，是因为您没有将所有3张卡始终包裹在列中.您可以使用 spacing实用程序类来调整边距或填充.>

The is happening because you didn't consistently wrap all 3 cards in columns. You can use the spacing utility classes to adjust margins or padding if needed.

<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

这篇关于Boostrap 4-卡片组和不同大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！