Bootstrap Input-Group搭配Spinner出现D形旋转异常如何解决？

问题原因 #

你把Bootstrap的spinner-border类直接写在了input-group-append容器标签上，input-group-append的默认样式会强制子元素高度适配输入框，且不会自动给加载动画预留等宽的正方形显示区域，导致圆形的加载动画被横向挤压，最终显示为D形。

解决方法 #

调整DOM结构，将spinner元素作为input-group-append的子元素放置，同时给spinner添加合适的边距适配输入框高度即可。

修正后的完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
</head>

<body>
  <form id="morning_metrics" onsubmit="return false;">
    <div class="form-group col-4">
      <label for="metric_sleep">Hours of Sleep </label>
      <div class="input-group">
        <input id="metric_sleep" name="metric_sleep" class="form-control" type="number" />
        <div class="input-group-append">
          <!-- spinner移到input-group-append内部，添加边距m-2让它居中显示，默认加d-none隐藏，请求时再移除即可 -->
          <div class="spinner-border m-2 d-none" id="sleepSpinner">
            <span class="visually-hidden">Loading...</span>
          </div>
        </div>
      </div>
    </div>
    <button id="saveForm" class="btn btn-primary" type="button" name="submit" value="Submit">Submit</button>
  </form>
</body>
</html>

额外说明 #

• 提交请求的时候移除spinner的d-none类即可显示加载状态，请求完成后再加回该类就能隐藏
• m-2是Bootstrap自带的外边距类，可以根据你的输入框高度调整为m-1/m-3来适配居中效果

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