时间戳

首页 > 解决方案 > Bootstrap Input-Group with Spinner 给出了奇怪的旋转 D 形状

html - Bootstrap Input-Group with Spinner 给出了奇怪的旋转 D 形状

问题描述

我有一个奇怪的表单，当您选择提交时，它将每行输入作为单独的请求发送。我想在每行的末尾放置一个微调器，它将一直旋转到该行的提交完成。

从技术上讲，这没有错误，但我得到的不是一个漂亮的圆形旋转器，而是这个旋转的“D”形。我尝试在微调器的开头添加填充/边距，但无处可去。

请帮忙？我对 CSS 不是很好。

编辑：尝试使用最新的 Chrome 和 Brave。

<!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-border float-right">
          <span></span>
        </div>
      </div>
    </div>
    <button id="saveForm" class="btn btn-primary" type="button" name="submit" value="Submit">Submit</button>
  </form>
  </div>
</body>

</html>

标签： htmlcssbootstrap-5

解决方案

您可以覆盖 Bootstrap 设置的微调器的默认样式。只需将border-radius属性设置为 50%。

推荐阅读