如何让列换行适配长单词？解决Bootstrap h2小屏重叠问题

问题根源 #

你的代码存在两个关键问题导致布局异常：

• HTML结构错误：第二个col-sm-6里多了一个闭合的</h2>标签，破坏DOM结构引发样式错乱
• 栅格嵌套不规范：Bootstrap栅格要求col必须直接放在row内部，最外层的col-sm-4未包裹在row中，导致布局计算异常

修正后的代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<!-- 最外层添加row容器，符合Bootstrap栅格规范 -->
<div class="row">
  <div class="col-sm-4">
    <h2>Heading</h2>
    <p> Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor </p>
    <button type="button" class="btn btn-light">View Details »</button>

    <div class="row">
      <!-- 移除多余的</h2>标签 -->
      <div class="col-sm-6">
        <h2>Heading</h2>
        <p> Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor </p>
      </div>

      <div class="col-sm-6">
        <h2>Heading</h2>
        <p> Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor </p>
      </div>
    </div>
  </div>
</div>

关键修改说明 #

1. 修复结构错误：删掉第二个col-sm-6里多余的</h2>，确保HTML标签正确闭合，避免浏览器解析异常
2. 规范栅格嵌套：把最外层的col-sm-4放到row容器中，Bootstrap栅格系统依赖row处理列的间距和布局计算，缺少row会导致列定位和宽度计算出错
3. 自动堆叠实现：Bootstrap 4中col-sm-6默认在屏幕宽度小于576px（sm断点）时，自动变为100%宽度实现垂直堆叠，无需额外添加类

修改后，小屏设备上两个col-sm-6会自动堆叠，h2元素不再重叠，布局可正常响应式变化。

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