如何让Bootstrap加载器(spinner)悬浮覆盖在父div元素上

你只需要添加如下自定义CSS样式即可实现加载器悬浮覆盖整个div的效果，无需大幅修改原有HTML结构：

/* 父容器card设置相对定位，作为加载器的定位基准 */
.card {
  position: relative;
}

/* 加载器容器样式 */
.k-block {
  position: absolute;
  inset: 0; /* 等效于top:0;left:0;right:0;bottom:0; */
  background-color: rgba(255, 255, 255, 0.7); /* 半透明白色背景，可自行调整颜色和透明度 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10; /* 层级高于card内部其他内容，确保覆盖显示 */
}

如果需要调整加载动画的尺寸，可以额外添加如下样式：

.spinner-border {
  width: 3rem;
  height: 3rem;
}

如果原有.k-block的默认显示样式和flex冲突，可在.k-block的样式规则中给display: flex添加!important提升优先级即可。

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