Cartões de inicialização com 100% de altura e margem inferior
Estou tentando desenvolver uma grade de placas do Bootstrap 4 com os seguintes requisitos:
Todas as cartas devem estar dentro de uma divclass="row"
, porque não sei quantas cartas haverá no total e quero que as linhas tenham boa aparência em diferentes pontos de interrupção da tela.As colunas nesta linha têm tamanhos diferentes em diferentes pontos de interrupção (por exemplo,col-sm-6 col-lg-4
)Dentro de qualquer 'linha exibida' individual, por exemplo, uma linha de cartões mostrada na tela a qualquer momento, cada cartão deve ter a mesma altura.Cada cartão deve ter uma margem na parte inferior para que seja separado de todos os outros cartões.Consegui chegar quase até lá, mas estou com um problema: definirclass="h-100"
nos meus cartões para garantir que todos tenham a mesma altura, mate a margem da parte inferior de cada cartão.
Existe uma maneira de garantir que todos os cartões em qualquer linha exibida tenham a mesma altura, preservando uma margem na parte inferior deles?
Código HTML :
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="card h-100 mb-4" style="background-color:#ff0000;">
Test card content.
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card h-100 mb-4" style="background-color:#00ff00;">
Test card content. Test card content. Test card content. Test card content.
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card h-100 mb-4" style="background-color:#0000ff;">
Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. Test card content.
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card h-100 mb-4" style="background-color:#0f0f0f;">
Test card content.
</div>
</div>
</div>
</div>