如何让两个联系字段实现居中且小屏幕堆叠的响应式效果？

首先你现有代码存在HTML语法错误：style属性里错误嵌套了class="row"，导致样式和类都无法正常生效，这是首要问题。

要只用inline CSS结合你已用的Bootstrap栅格实现需求，可按以下步骤修改：

修正后的代码示例 #

<div style="display: flex; justify-content: center; flex-wrap: wrap;" class="row">
  <!-- Call Us 字段 -->
  <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 footer_contact_info">
    <p>Call Us: 123-456-7890</p>
  </div>
  <!-- Our Email 字段 -->
  <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 footer_contact_info">
    <p>Our Email: contact@example.com</p>
  </div>
</div>

关键调整说明 #

• 修复语法错误：把class="row"从style属性中移出，单独作为元素的class属性，同时补全style的闭合引号。
• flex布局优化：给父元素添加flex-wrap: wrap，确保子元素在空间不足时自动换行。
• 调整栅格类：原col-xl-4是为3个元素设计的（12/3=4），现在只剩2个元素，改为col-xl-6 col-lg-6 col-md-6，让大屏幕上两个元素各占一半宽度，保持居中对齐；同时保留col-sm-12 col-12，确保小屏幕（sm及以下断点）每个元素占满整行，自动上下堆叠。

这种方式不需要额外CSS文件，仅通过inline CSS修正布局逻辑+Bootstrap内置的响应式栅格类，就能实现你要的效果。

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