如何消除引導輸入元素內部的間隙？

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;
}

導致 ：

請注意，不同瀏覽器的小箭頭大小可能不完全相同。