Question

在bootstrap 4卡片文档页面（在图像＆gt;图像上限）下，他们提供了两个示例。可以将图像放置在卡块的顶部或底部，使用.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

bootstrap 4：在两个卡块之间放置图像

1 个答案: