Bootstrap布局问题：添加<p>标签后图片无法同行显示

问题根源 #

1. 未使用Bootstrap栅格系统的col-*列类划分布局，row下直接嵌套单个div，所有内容默认按块级元素垂直排列。
2. <p>是块级元素，默认独占一行，导致图片与文字被强制换行，最终两张图片无法保持同一行。

修复代码 #

将每个图片+文字的组合单独放入col容器，借助Bootstrap栅格实现横向排列：

<div class="container">
    <div class="row">
        <!-- 第一个图片+文字模块 -->
        <div class="col-6 text-center">
            <img class="bruno" src="resourcesnew/css/Img/bruno.jpg">
            <p class="h6">Bruno</p>
        </div>
        <!-- 第二个图片+文字模块 -->
        <div class="col-6 text-center">
            <img class="anth" src="resourcesnew/css/Img/anth.jpg">
            <p class="h6">Anthony</p>
        </div>
    </div>
</div>

关键说明 #

• col-6：让每个列在所有屏幕尺寸下占据父容器宽度的50%，保证两个内容模块并排显示。
• text-center：维持模块内图片和文字的居中对齐，匹配你原本的布局需求。
• 每个独立内容块嵌套在col中后，块级元素<p>仅会在自身列内换行，不会干扰整体横向布局。

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