Bootstrap切换spinner加载状态切回后按钮尺寸变化是何原因？

按钮从加载状态切回默认状态的代码存在写法错误：你给按钮内部嵌套的<span>标签错误添加了btn btn-primary类。
外层<button>元素本身已经应用了btn btn-primary的按钮基础样式，内部再嵌套一个带相同按钮类的子元素时，会重复计算内边距、边框、行高样式，最终渲染尺寸和初始的纯文本按钮状态不一致。初始状态下按钮内部只有纯文本Submit，不存在嵌套的带按钮样式的子元素。

出错的是恢复默认状态的逻辑部分：

function toDefault() {
  const btn = document.getElementById('submitBtn');
  // 错误：内部span多余添加了btn btn-primary类
  btn.innerHTML = '<span class="btn btn-primary">Submit</span>';
}

移除内部span上多余的按钮类即可，不需要给按钮的子元素重复加btn相关样式，甚至可以直接写入文本，不需要额外套span标签，保证和初始按钮结构完全一致：

function toDefault() {
  const btn = document.getElementById('submitBtn');
  btn.innerHTML = 'Submit';
}

优化建议 #

切换加载状态时建议同步设置按钮的disabled属性，避免加载过程中用户重复点击触发多次请求，恢复状态时再移除禁用属性即可：

function update() {
  var btn = document.getElementById('submitBtn');
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
  setTimeout(toDefault, 5000);
}

function toDefault() {
  const btn = document.getElementById('submitBtn');
  btn.disabled = false;
  btn.innerHTML = 'Submit';
}

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