Bootstrap 5定价栏添加图片标题后图标堆叠问题咨询

问题核心是<p>标签默认是块级元素，会占满父容器宽度，导致包含图标和标题的子容器被撑满一行，破坏原本的横向布局。以下是具体修改方案：

方案1：给<p>添加Bootstrap行内类 #

利用Bootstrap的d-inline-block类将<p>改为行内块元素，同时用mb-0去掉默认边距避免额外间距：

<!-- 修正后的代码 -->
<div class="d-flex">
  <div class="text-center me-3">
    <img src="icon1.png" alt="图标1">
    <p class="d-inline-block mb-0">标题1</p>
  </div>
  <div class="text-center">
    <img src="icon2.png" alt="图标2">
    <p class="d-inline-block mb-0">标题2</p>
  </div>
</div>

方案2：强制Flex容器不换行 #

给外层flex容器添加flex-nowrap类，确保子元素不会自动换行，同时给每个图标+标题容器加间距：

<!-- 修正后的代码 -->
<div class="d-flex flex-nowrap">
  <div class="text-center me-3">
    <img src="icon1.png" alt="图标1">
    <p class="mb-0">标题1</p>
  </div>
  <div class="text-center">
    <img src="icon2.png" alt="图标2">
    <p class="mb-0">标题2</p>
  </div>
</div>

方案3：自定义CSS调整标签属性 #

如果不想依赖Bootstrap类，可自定义CSS修改<p>的显示模式：

.icon-caption {
  display: inline-block;
  margin: 0;
}

然后在HTML中引用该类：

<p class="icon-caption">标题1</p>

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