html - Bootstrap 4 : How to adjust the length of an input using the class input-group-append?

Question

我正在创建一个带有两个数字输入框的工资率，

我遇到的问题是输入框被过度拉伸(stretch)，导致美分的文件掉落到下一行。 bootstrap 的 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 中时，我无法将 $ 输入到数据库中。

Answer 1

好问题...开箱即用，似乎有多个 input-group-append 类不会影响最后一个输入框...所以我们必须管理它的宽度我们自己:我们用它的最大宽度属性来做到这一点。

下面的工作片段:

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