HTML5數字輸入「step」屬性影響Bootstrap列樣式

Question

我有一些數字輸入樣式與Bootstrap，但如果我有兩個最小和最大設置，沒有step="any"輸入大小行爲不同。

<!-- Has step="any", min, max, and fills up all space --> 
<div class="row form-group form-inline"> 
    <label class="col-md-3">Input: </label> 
    <span class="col-md-2" style="background-color:red;"> 
     <input class="form-control col-md-12" type="number" step="any" min="0" max="100"/> 
    </span> 
</div> 

<!-- Has just min and fills up all space --> 
<div class="row form-group form-inline"> 
    <label class="col-md-3">Input: </label> 
    <span class="col-md-2" style="background-color:red;"> 
     <input class="form-control col-md-12" type="number" min="0"/> 
    </span> 
</div> 

<!-- Has nothing and fills up all space --> 
<div class="row form-group form-inline"> 
    <label class="col-md-3">Input: </label> 
    <span class="col-md-2" style="background-color:red;"> 
     <input class="form-control col-md-12" type="number"/> 
    </span> 
</div> 

<!-- Has a step that is not "any", min, max, and does not fill up the space --> 
<div class="row form-group form-inline"> 
    <label class="col-md-3">Input: </label> 
    <span class="col-md-2" style="background-color:red;"> 
     <input class="form-control col-md-12" type="number" step="1" min="0" max="100"/> 
    </span> 
</div> 

<!-- Has both min and max and does not fill up the space --> 
<div class="row form-group form-inline"> 
    <label class="col-md-3">Input: </label> 
    <span class="col-md-2" style="background-color:red;"> 
     <input class="form-control col-md-12" type="number" min="0" max="100"/> 
    </span> 
</div> 

有誰知道什麼可能是怎麼回事？

Plunker：https://plnkr.co/edit/47KYE7BjVzFydqFuMi6O?p=preview（您可能需要展開幀大小看問題）

Answer 1

這可能是瀏覽器特定的行爲。

當max和step屬性設置，Chrome瀏覽器可用於number輸入型顯示較窄輸入框中，作爲最大的有效值的長度是有限的。 同樣在Chrome上，「上下」GUI微調器小部件佔用輸入總寬度的空間。