Bootstrap样式类原本正常突然失效 引入CDN及本地源文件均无效

你的Bootstrap样式全部失效和引入方式（CDN/本地）无关，核心是代码里的类名使用错误、版本不匹配问题，逐一核对以下点即可修复：

• 类名拼写错误：Bootstrap全版本都不存在container-flex这个预设类，如果你需要全宽流式容器，用container-fluid；如果你需要给当前元素开启弹性布局，用d-flex。类名完全不匹配的情况下，浏览器不会加载任何对应样式。
• 栅格类和Bootstrap版本不匹配：col-xs-*是Bootstrap 3及更早版本的超小屏幕栅格类，Bootstrap 4、Bootstrap 5已经移除了xs断点标识，超小屏直接用col-*类即可。如果你引入的是4/5版本，写col-xs-6不会触发任何栅格样式。
• 资源加载校验：按F12打开浏览器开发者工具，切换到Network面板刷新页面，检查bootstrap.min.css的加载状态，如果状态码是404，说明你写的相对路径不对，要确认HTML文件同级目录下确实存在css/bootstrap.min.css文件，注意文件名大小写要完全匹配（比如文件实际是Bootstrap.min.css你写小写开头也会加载失败）。
• 引入顺序调整：你当前把自定义样式HALOGENCSS.css放在Bootstrap样式之前引入，如果自定义文件里写了全局重置类、和Bootstrap同名的类，可能会出现样式覆盖问题，把Bootstrap的CSS引入放在最前面，自定义CSS放在后面即可。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap demo</title>
    <!-- 先引入Bootstrap核心CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 后引入自定义CSS -->
    <link href="HALOGENCSS.css" rel="stylesheet">
    <script src="js/bootstrap.bundle.js"></script>
  </head>
  <body>
    <!-- 以Bootstrap5为例，container-flex替换为container-fluid，col-xs-6替换为col-6 -->
    <div class="container-fluid">
      <div class="row">
        <div class="col-6">
          <img src="log.JPG" alt="logo" id="logo" style="width: 120px; height: 120px;"/>
        </div>
        <div class="col-6">
          <img src="dropdown.png" alt="dropdown button" id="dropdown" style="width: 30px; height: 30px;"/>
        </div>
      </div>
    </div>
  </body>
</html>

如果你使用的是Bootstrap3版本，保留col-xs-6即可，仅需要修正container-flex的类名、确认CSS文件加载正常。

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