Bootstrap嵌套列未水平并排反而垂直排列的原因与版本判断

你代码里的left、right区块上下堆叠，核心原因是违反了Bootstrap 4及以上版本的栅格嵌套规则：

• Bootstrap 4+ 栅格基于flex实现，要求.col/.col-*列元素必须是.row容器的直接子元素，才能触发flex水平排列效果。
• 你的代码里两个.col直接作为.col-lg-12的子元素，中间没有包裹新的.row容器，这两个.col不会被识别为栅格列，会被渲染为普通块级元素，默认占满整宽、上下堆叠。

正确的嵌套写法不需要删除.col-lg-12层级，只需要在.col-lg-12内部新增一层.row容器包裹子列即可：

<section className="section-top-overflow">
  <div className="container">
    <div className="row">
      <div className="col-lg-12">
        <div className="row">
          <div className="col">left</div>
          <div className="col">right</div>
        </div>
      </div>
    </div>
  </div>
</section>

这个判断逻辑不成立：

• Bootstrap 3基于float实现栅格，同样要求列必须放在.row容器内，直接嵌套列也不会自动水平排列。
• 你参考的页面能实现列直接嵌套并排，是因为主题自定义了布局CSS规则，没有使用原生Bootstrap的默认栅格逻辑，和Bootstrap版本没有直接关系。

• 控制台命令检测
  打开浏览器开发者工具的Console面板：
  • 针对Bootstrap 3/4（依赖jQuery的版本），输入$.fn.tooltip.Constructor.VERSION回车，返回值就是当前Bootstrap版本号
  • 针对Bootstrap 5（无jQuery依赖），输入bootstrap.Tooltip.VERSION回车，即可返回版本号
• 静态资源特征判断
  打开开发者工具的Network面板，筛选CSS/JS资源，查找带bootstrap关键字的文件：文件名通常会标注版本号，也可以打开文件查看头部的版本注释信息。
• 类名特征判断
  • 存在不带断点前缀的列类（比如直接写class="col-6"、class="col"），是Bootstrap 4及以上版本，Bootstrap 3的所有列都必须带col-xs-*/col-sm-*这类断点前缀
  • 存在navbar-expand-*、form-row类，是Bootstrap 4
  • 存在xxl断点列、offcanvas相关类，是Bootstrap 5
  • 导航类使用navbar-left/navbar-right，所有列都带断点前缀，是Bootstrap 3

内容的提问来源于stack exchange，提问作者János