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微调器小部件占用输入总宽度的空间。