Bootstrap 4：桌面端文字居中移动端不居中及头部布局适配问题

1. 桌面端文字居中、移动端不居中的实现 #

完全可以实现！Bootstrap 4提供了响应式文本对齐类，只需要结合断点前缀就能轻松搞定。

核心思路是：给元素添加移动端的对齐类（比如text-left），再添加桌面端（及以上断点）的居中类text-md-center。因为Bootstrap的响应式类是「断点往上生效」，所以当屏幕宽度达到md（默认≥768px）时，text-md-center会覆盖移动端的对齐方式。

示例代码：

<div class="text-left text-md-center">
  这段文字在手机上左对齐，平板/电脑上自动居中
</div>

如果需要移动端默认对齐（比如左对齐是Bootstrap默认样式），甚至可以只写text-md-center，省去移动端的对齐类。

2. 头部布局：桌面端两端图片+居中文字，移动端堆叠 #

当然也能实现，利用Bootstrap 4的响应式Flex布局类就能完美解决，几乎不用写自定义CSS。

以下是优化后的完整头部代码，每个类的作用都标注在注释里：

<header class="container d-flex flex-column flex-md-row align-items-center justify-content-between py-3">
  <!-- 左侧图片 -->
  <img class="rounded mb-3 mb-md-0" src="wpimages/wp7dd375bf.png" alt="左侧图标">
  
  <!-- 中间文字区域 -->
  <div class="text-center">
    <h1>Ring</h1>
    <p>01427 752095</p>
  </div>
  
  <!-- 右侧图片（补全你原代码的缺失部分） -->
  <img class="rounded" src="wpimages/your-right-image.png" alt="右侧图标">
</header>

关键类的作用说明：

• d-flex：将header转为Flex容器，方便灵活控制内部元素的排列方式
• flex-column flex-md-row：移动端（屏幕<768px）时元素垂直堆叠，桌面端（≥768px）时自动切换为水平排列
• align-items-center：让所有元素在垂直方向上居中对齐，不管是堆叠还是横排都能保持视觉协调
• justify-content-between：桌面端横排时，自动把左右两张图片推到容器的两端，中间文字自然居中，刚好满足你「图片在边角」的需求
• mb-3 mb-md-0：移动端堆叠时给图片下方添加间距（避免和文字挤在一起），桌面端横排时自动去掉这个间距

如果希望移动端文字左对齐，只需要把文字区域的text-center改成text-left text-md-center即可。

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