html - Bootstrap 4 : Placing a image between two card blocks

Question

在 bootstrap 4 卡文档页面(图像下 > 图像帽)，他们提供了两个示例。图像可以放置在卡片 block 的顶部或底部，带有 .card-block div 在图像标签之后或之前。我想知道是否可以像这样将图像放在两个卡片 block 之间。

<div class="card-group> 
    <div class="card>
        <div class="card-block></div>
        <img src="..." alt="..." >
        <div class="card-block></div>
    </div>
    <!--Multiple Cards-->
</div>

我尝试这样做，但结果不如预期。尽管卡片确实具有相同的高度和宽度，但图像未正确对齐(相对于其他卡片中的图像)。根据卡片 block 的内容，图像将向上或向下移动。

Answer 1

不要为顶部内容使用卡片 block ，而是使用卡片标题。

<div class="card-group">
    <div class="card">
        <div class="card-header"> </div>
        <img src="..." alt="...">
        <div class="card-block"> </div>
    </div>
</div>

See example Image