调整Bootstrap输入元素的帮助文本

Question

我需要调整输入后面的帮助文本的间距（注意Work Telephone与其描述性文本之间的额外间距）：

erb：

<div class="form-row">

  <div class="form-group col-md-4">
    <label for="inputWorkEmail">Work Email</label>
    <input type="email" class="form-control" id="inputWorkEmail" name="contact[work_email]" aria-describedby="emailHelp" placeholder="first.last@company.web" value="<%= @contact[:work_email] %>">
    <small id="emailHelp" class="form-text text-muted">Work email address of the contact.</small>
  </div>

  <div class="form-group col-md-4">
    <label for="inputWorkTelephone">Work Telephone</label>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon3"><i class="fas fa-phone"></i></span>
      </div>
      <input type="tel" class="form-control" id="inputWorkTelephone" name="contact[work_telephone]" aria-describedby="telephoneHelp" placeholder="800-555-1212" value="<%= @contact[:work_telephone] %>">
    </div>
    <small id="telephoneHelp" class="form-text text-muted">Work telephone number of the contact.</small>
  </div>

</div>

Answer 1

输入和帮助文本之间的空格是由输入组中的类mb-3引起的。

.mb-3, .my-3 {
    margin-bottom: 1rem!important;
}

如果删除该类，则保证金将会消失：

<div class="form-row">

  <div class="form-group col-md-4">
    <label for="inputWorkEmail">Work Email</label>
    <input type="email" class="form-control" id="inputWorkEmail" name="contact[work_email]" aria-describedby="emailHelp" placeholder="first.last@company.web" value="<%= @contact[:work_email] %>">
    <small id="emailHelp" class="form-text text-muted">Work email address of the contact.</small>
  </div>

  <div class="form-group col-md-4">
    <label for="inputWorkTelephone">Work Telephone</label>
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon3"><i class="fas fa-phone"></i></span>
      </div>
      <input type="tel" class="form-control" id="inputWorkTelephone" name="contact[work_telephone]" aria-describedby="telephoneHelp" placeholder="800-555-1212" value="<%= @contact[:work_telephone] %>">
    </div>
    <small id="telephoneHelp" class="form-text text-muted">Work telephone number of the contact.</small>
  </div>
</div>

更正后的代码位于此fiddle