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

这可能是浏览器特定的行为。

设置elementType和max属性后，Chrome浏览器可能会为step输入类型显示更窄输入框，因为最大有效长度值有限。同样在Chrome上，向上和向下GUI微调器小部件从输入的总宽度中占用空间。

HTML5号码输入＆＃39;步骤＆＃39;属性影响Bootstrap列样式

1 个答案: