代码之家 › 专栏 › 技术社区 › craig

调整引导输入元素的帮助文本

bootstrap-4

0

craig · 技术社区 · 8 年前

我需要调整输入后帮助文本的间距(注意 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>

1 回复 | 直到 8 年前

1

jcvegan 8 年前

输入和帮助文本之间的空格是由类引起的 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