输入字段宽度显示相同列大小的不同大小

Question

我在 bootstrap 中有一个简单的表单，输入是按行堆叠的。输入的列类为“col-sm-6”，但它们的宽度在显示中有所不同。这是表单的代码：

        <fieldset class="general">
          <div class="first  card">
            <div class="card-header">
              <h5>Purchase Costs</h5>
            </div>
            <div class="form-group row">
              <label class="col-sm-6 col-form-label">Purchase Price</label>
              <div class="col-sm-6">
                <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text">$</span>
                  </div>
                  <input type="text" class="form-control" id="C10">
                </div>
              </div>
            </div>

       
            <div class="form-group row">
              <label class="col-sm-6 col-form-label">Escrow</label>
              <div class="col-sm-6">
                <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text">$</span>
                  </div>
                  <input type="text" class="form-control" id="C16">
                </div>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-6 col-form-label">Title</label>
              <div class="col-sm-6">
                <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text">$</span>
                  </div>
                  <input type="text" class="form-control" id="C17">
                </div>
              </div>
            </div>
          </div>
          <input type="button" name="next" class="next action-button" value="Next" />
        </fieldset>

所有输入字段都具有相同的列类“col-sm-6”，但它们的宽度显示不同。我曾尝试更改 CSS 中的宽度，但这会使输入添加混乱。 这是显示问题的图像：