使用Bootstrap在图片旁添加文字 如何调整p标签使其显示在名称下方

你现在的问题是外层card-img-top容器加了d-flex属性，所有直接子元素默认横向排列，要放在名称下方的p标签如果和头像、名称写在同级，自然会显示在旁侧。只要把名称和后续要放的p标签统一放到同一个块级容器里，作为flex布局的单个子项即可，修改后的代码参考：

<div class="card" style="width: 25rem;">
    <div class="card-body bg-light">
        <h5 class="card-title text-center">The title should be here...</h5>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2">
        <!-- 头像容器 -->
        <div>
            <a class="fancybox" href="admin/files/Images/ProfilePicture.png">
            <img src="admin/files/Images/ProfilePicture.png" style="width: 100px; height: 100px">
            </a>
        </div>
        <!-- 新增文本容器，包裹名称和下方的p标签 -->
        <div class="col p-2 m-0">
            <p class="m-0">The name should be here...</p>
            <!-- 你要放在名称下方的p标签 -->
            <p>你需要添加的其他p标签内容</p>
        </div>
    </div>
    <div>
    </div>
</div>

调整后外层flex的子项只有「头像容器」和「文本容器」两个，保持横向排列，文本容器内部的p标签默认是块级元素，会自动垂直排布，就能实现你要的效果。

内容的提问来源于stack exchange，提问作者Mike