我有一個奇怪的表單,當您選擇提交時,它會將每一行輸入作為單獨的請求發送。我想在每一行的末尾放置一個微調器,它會旋轉直到該行的提交完成。
從技術上講,這可以正常作業,但不是一個漂亮的圓形微調器,而是這個旋轉的“D”形。我試過在微調器的開頭添加填充/邊距,但無處可去。
請幫忙?我不擅長 CSS。
編輯:嘗試使用最新的 Chrome 和 Brave。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
uj5u.com熱心網友回復:
您可以覆寫由 Bootstrap 設定的微調器的默認樣式。只需將border-radius屬性設定為 50%。
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/328515.html
標籤:html css bootstrap-5
上一篇:如何使用CSS將選項框向右移動?
