Bootstrap5行内三列VS Code预览垂直堆叠无法水平排列如何排查

完成CS50作业测试Bootstrap功能时，三列网格无法实现跨页面水平排列：

• 预期效果：col1 col2 col3横向排布
• 实际效果：三列始终垂直堆叠，显示如下

col1
col2
col3

直接取用Bootstrap5网格教程「三等分列」章节的示例代码，在线运行可正常实现三列水平排列效果，但在本地VS Code环境中运行出现上述异常。
已确认基础配置一致：两个环境的HTML head部分均通过cdn.jsdelivr.net引入了相同版本的Bootstrap样式表bootstrap.min.css和脚本bootstrap.bundle.min.js，body部分也按照规范使用container包裹row，row内包裹三个列。
使用的测试代码如下：

<main>
 <div class="container">
  <div class="row">
   <div class="col">col 1</div>
   <div class="col">col 2</div>
   <div class="col">col 3</div>
  </div>
 </div>
</main>

目前未发现代码存在显性错误，使用VS Code的Live Preview功能预览时三列始终垂直堆叠，耗时两个工作日尝试同类问题帖子中的修复方法均未生效。

按优先级从高到低逐一排查：

• 检查视口meta标签是否缺失：Bootstrap为移动优先框架，head内必须添加<meta name="viewport" content="width=device-width, initial-scale=1">，缺失该标签会导致网格媒体查询不生效，所有列默认按移动端样式垂直堆叠，这是本地运行最常见的触发原因。
• 检查Bootstrap CSS资源加载状态：打开浏览器开发者工具（按F12唤起）切换到Network面板，刷新页面查看bootstrap.min.css的请求状态，如果显示404、blocked或者加载失败，说明CDN路径拼写错误、本地网络无法访问对应CDN，或者link引入标签的位置错误（CSS link标签必须放在head内，不能放在body尾部或者外部）。
• 检查HTML文件的DOCTYPE声明：文件第一行必须是<!DOCTYPE html>，如果缺失或者拼写错误，浏览器会进入怪异渲染模式，无法正常解析Bootstrap的flex网格样式。
• 检查类名拼写：逐一确认container、row、col三个类名无拼写错误，不要出现大小写错误、多/漏字母的情况（比如误写为rows、Coll、contianer这类笔误）。
• 检查自定义CSS是否覆盖默认样式：在开发者工具Elements面板选中任意一个col元素，查看右侧样式面板，是否有自定义CSS给.col、.row或者通用div标签设置了width: 100%、display: block、flex: none这类会破坏flex网格布局的属性，若存在先注释所有自定义CSS再测试。
• 排除Live Preview插件问题：直接在本地文件管理器中找到对应HTML文件，双击用系统浏览器打开，如果直接打开显示正常，说明是VS Code Live Preview插件缓存或者渲染异常，重启插件、清空预览缓存或者重装插件即可解决。

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