HTML5 Nummer Eingang 'Schritt' Attribut bewirkt Bootstrap Spalte Styling

Question

Ich habe einige Zahleneingaben mit Bootstrap formatiert, aber wenn ich sowohl ein Minimum und Maximum eingestellt haben, ohne step="any" verhält sich die Eingabegröße anders.

<!-- 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> 

Weiß jemand, was passieren könnte?

Plunker: https://plnkr.co/edit/47KYE7BjVzFydqFuMi6O?p=preview (Möglicherweise müssen Sie die Rahmengröße erweitern, um die Ausgabe zu sehen)

Answer 1

Dieser Browser spezifische Verhalten sein kann.

Wenn max und step Attribute gesetzt sind, kann Chrome-Browser für number Eingabetyp, wie die Länge des größten gültigen Wertes begrenzt ist ein schmaleren Eingabefeld angezeigt werden. Auch in Chrome, das Up und Down GUI Spinner Widget nimmt Platz von der Gesamtbreite der Eingabe.