将Bootstrap 3模板转换为Bootstrap 5时显示异常，如何修复？

问题出在哪？ #

从代码和效果对比来看，核心是Bootstrap 3到5的类名大改、组件结构调整、依赖移除这几个关键点：

• 栅格系统类名变更：Bootstrap 3的col-xs-*在5里被移除，换成了col-*；
• 导航栏组件重构：navbar-default这类旧样式类被废弃，换成了navbar-light/navbar-dark+bg-*的组合，折叠按钮的类名和触发属性也从navbar-toggle、data-toggle改成了navbar-toggler、data-bs-toggle；
• 组件类名更新：像btn-default这类按钮类被重命名为btn-secondary，部分表单类也有调整；
• 移除jQuery依赖：Bootstrap 5不再依赖jQuery，原模板里依赖jQuery的旧交互脚本直接失效。

怎么修复？ #

1. 替换栅格类名 #

把所有col-xs-*直接改成col-*，比如col-xs-6换成col-6，col-xs-12换成col-12；col-sm-*、col-md-*这类可以保留，Bootstrap 5兼容这些类。

2. 重构导航栏 #

• 把导航栏的navbar-default替换成navbar-light bg-light（如果要深色导航栏就用navbar-dark bg-dark，对应原模板配色选择）；
• 折叠按钮替换成Bootstrap 5的标准结构：

  <!-- 旧Bootstrap 3代码 -->
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <!-- 替换为Bootstrap 5代码 -->
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  

  注意属性前缀从data-改成了data-bs-，这是Bootstrap 5的统一规范。

3. 更新组件类名 #

• 把btn-default改成btn-secondary；
• 表单里的form-group类在Bootstrap 5中仍可使用，若遇到form-control-static这类辅助类样式错位，可微调适配5的表单布局逻辑。

4. 调整JS引入 #

• 删除原模板里的jQuery（如果没有其他自定义jQuery代码的话）；
• 确保引入Bootstrap 5的bundle版JS，它包含了Popper.js，无需单独引入：

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  

5. 同步自定义CSS #

原模板里针对Bootstrap 3类的自定义样式，比如.navbar-default .navbar-nav>li>a，要改成Bootstrap 5对应的类，比如.navbar-light .navbar-nav .nav-link，否则自定义样式会失效。

改完之后刷新页面，检查导航折叠、栅格布局、按钮样式等，基本就能恢复原模板的效果了。

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