Ajax加载面板无法显示？适配Bootstrap4/SASS/FontAwesome5问题

咱们先从最核心的适配点入手，毕竟从Bootstrap 3→4、FontAwesome 4→5有不少类名和结构的变化，这大概率是加载图标不显示、面板样式异常的原因。

1. 替换FontAwesome 5的图标类名 #

FontAwesome 5把图标分成了solid/regular/brands等样式组，原来FA4的fa fa-spinner要改成对应FA5的类名，加载旋转图标推荐用：

<i class="fas fa-spinner fa-spin fa-2x"></i>

• fas 对应FA4默认的实心图标样式
• fa-spin 保留旋转动画（这个类名FA5仍兼容）
• 想要脉冲式旋转效果的话，还可以替换fa-spin为fa-pulse

2. 适配Bootstrap 4的加载面板结构 #

如果你的加载面板基于Bootstrap模态框实现，Bootstrap 4对模态框结构做了不少调整，比如新增了居中类、优化了阴影和圆角：

<!-- 默认显示加载面板，方便你直接验证外观 -->
<div class="modal fade show" id="ajaxLoadingPanel" tabindex="-1" role="dialog" style="display: block;" aria-modal="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body text-center py-4">
        <i class="fas fa-spinner fa-spin fa-3x mb-3"></i>
        <p>Processing, please wait...</p>
      </div>
    </div>
  </div>
</div>
<!-- 必须加上模态框背景层，才能实现页面遮罩效果 -->
<div class="modal-backdrop fade show"></div>

这里给模态框和背景层都加了show类，让它默认显示，后续你可以通过JS动态添加/移除这个类来控制Ajax状态下的显示隐藏。

3. 快速修复样式适配问题 #

如果原项目的LESS样式迁移到SASS后有变量不兼容的情况，比如Bootstrap 3的@gray-light在Bootstrap 4里变成了$gray-200，你可以先写临时的自定义CSS确保面板样式正常：

#ajaxLoadingPanel .modal-content {
  border: none;
  border-radius: .5rem; /* 对齐Bootstrap4默认圆角风格 */
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15); /* 使用Bootstrap4默认阴影 */
}

4. 确认依赖引入正确 #

最后检查页面是否正确引入了：

• Bootstrap 4的CSS（要放在自定义SASS/CSS之前）
• FontAwesome 5的CSS（比如引入官方CDN的全量包即可）

调整完这些，加载面板应该就能正常显示旋转图标和正确的遮罩样式了，你可以先验证这个静态版本的外观，没问题后再接入Ajax的显示隐藏逻辑。

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