Bootstrap Input-Group with Spinner 给出奇怪的旋转 D 形
[英]Bootstrap Input-Group with Spinner gives weird spinning D shape
问题描述
我有一个奇怪的表格，当您 select 提交时，将每行输入作为单独的请求发送。 我想在每一行的末尾放置一个微调器，它会一直旋转直到该行的提交完成。
从技术上讲，这可以正常工作，但我得到的不是漂亮的圆形旋转器，而是旋转的“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>
2 个解决方案
解决方案1
2 已采纳 2021-10-20 17:23:21
您可以覆盖由 Bootstrap 设置的微调器的默认样式。 只需将border-radius属性设置为 50%。
解决方案2
0 2022-04-11 08:53:41
您应该添加.rounded-circle class 来解决这个问题。
将它放在.input-group-text中也可能有帮助。
<span class="input-group-text">
<span class="spinner-border"></span>
</span>
引导输入组问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.