Bootstrap 4：如何使用类input-group-append调整输入的长度？

191

用户8776656

我正在用两个数字输入框来创建一个工资率，

我遇到的问题是输入框被拉伸得太多，导致cent的文件下降到了下一行。带引导程序的Maxlength被忽略，因此我可以调整输入框的长度。

<div class="form-group col-md-6">
        <label for="pay_rate">Pay Rate</label>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">$</span>
            </div>
            <input type="number" name="pay_rate" id="pay_rate" class="form-control" style="text-align: right;" placeholder="0" maxlength="4" size="4">
            <div class="input-group-append">
                <span class="input-group-text">.</span>
            </div>
            <div class="input-group-append">
                <input type="number" name="pay_rate" id="pay_rate" class="form-control" placeholder="00"maxlength="2" size="2">
            </div>
        </div>
</div>

货币输入字段将显示美元和美分的最佳选择是什么？但是当加载到SQL中时，我无法将$输入到数据库中。

阿克伯·伊克巴尔

一个好问题……开箱即用，似乎拥有多个input-group-append类不会影响最后一个输入框……所以我们必须自己管理宽度：我们使用max-width属性来实现。

工作片段如下：

.myClass {
  max-width: 32%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="form-group col-md-6">
  <label for="pay_rate">Pay Rate</label>
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">$</span>
    </div>
    <input type="number" name="pay_rate" id="pay_rate" class="form-control" style="text-align: right;" placeholder="0" maxlength="4" size="4">
    <div class="input-group-append">
      <span class="input-group-text">.</span>
    </div>
    <div class="input-group-append myClass">
      <input type="number" name="pay_rate" id="pay_rate" class="form-control" placeholder="99" maxlength="4" size="4">
    </div>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。