引导卡片组元素的比例不同

Question

我显示卡片组是为了显示存储在数据库中的一组文章。这是我正在使用的非常简单的一段代码：

HTML

<div class="row">
    <div class="card-deck">
        <template is="dom-repeat" items="{{articles}}" as="article">
            <div class="col-12 col-md-4 mb-md-5">
                <div
                    class="card"
                    on-tap="showViewer"
                    data-id$="[[article.id]]"
                >
                    <img
                        class="card-img-top img-fluid vertical-image"
                        src$="{{getArticleImage(article)}}"
                        onerror$="this.src='{{defaultimage}}'"
                        alt="{{getArticleDescription(article)}}"
                    />
                    <div class="card-body d-flex flex-column justify-content-center py-2">
                        <div class="d-flex justify-content-start align-items-center mb-2">
                            <img class="icon-sm mr-2 img-fluid" src={{getFavIcon(article)}}>
                            <span class="medium-text">
                                {{getSources(article)}}
                            </span>
                        </div>
                        <p class="card-text primary-headline medium-text">
                            {{article.schema:headline}}
                        </p>
                    </div>
                </div>
            </div>
        </template>
    </div>
</div>

CSS

.vertical-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

.icon-sm {
    height: 20px;
    width: auto;
}

.medium-text {
    font-family: Raleway-Medium;
}

.primary-headline {
    font-size: 25px;
    line-height: 25px;
    text-align: justify;
}

根据Bootstrap documentation，使用card-deck 类应该使卡片组中的所有卡片具有相同的宽度和高度。但是，我没有实现这种行为。 Here你是一张照片，你可以看到我得到了什么。

实现卡片中的所有图像和所有卡片都具有相同的高度和宽度的正确方法是什么？

Answer 1

检查这个。希望对您有所帮助。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-sm-4 py-2">
            <div class="card card-body h-100">
                Card. I'm just a simple card-block.
            </div>
        </div>
        <div class="col-sm-4 py-2">
            <div class="card h-100 text-white bg-danger">
                <div class="card-body">
                    <h3 class="card-title">Danger</h3>
                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-outline-light">Outline</a>
                </div>
            </div>
        </div>
        <div class="col-sm-4 py-2">
            <div class="card h-100 card-body">
                Card. I'm just a simple card-block, but I have a little more text!
            </div>
        </div>
        <div class="col-sm-4 py-2">
            <div class="card h-100 border-primary">
                <div class="card-body">
                    <h3 class="card-title">Primary</h3>
                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-outline-secondary">Outline</a>
                </div>
            </div>
        </div>
        <div class="col-sm-4 py-2">
            <div class="card h-100 card-body">
                Card. I'm just a simple card-block.
            </div>
        </div>
        <div class="col-sm-4 py-2">
            <div class="card text-white bg-primary">
                <div class="card-body">
                    <h3 class="card-title">Hello</h3>
                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-outline-light">Outline</a>
                </div>
            </div>
        </div>
    </div>
</div>