引导程序 4：在两个卡块之间放置图像

Question

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

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

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

Answer 1

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

<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