如何消除bootstrap输入元素内部的间隙？

Question

在此输入组中，如您所见，输入字段内部有不必要的空白，我想摆脱它

如上所示，这条黑线是我的号码和链接按钮之间的距离。如何删除它？

.resetToDef{
  display: block;
  width:25.8%;
  max-width: 195.1px;
  border-radius: 4px;
  border: 1px solid #FF7921;
}


 .resetToDef a{
  font-size:12px;
  color:#FF7921;
  border: none;
  text-decoration-line: underline
}

.resetToDef input{
 display:inline-block;
 width:57px;
 border:none;
}

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

  <div class="resetToDef input-group">
                    <input type="number" class="form-control" placeholder="30">
                    <a href="javascript:void(0)" class="float-right btn">Back to default</a>
                 </div>

Answer 1

从您的代码段开始：

宽度由flex自动计算。因此，如果删除flex，则可以使用宽度和填充。

.resetToDef.input-group > input.form-control {
    flex: none;
    width: 52px;
    padding-right: 5px;
}

产生：

请注意，各个浏览器的小箭头可能看起来不完全相同。