如何将标题移近输入框?

时间:2019-02-01 16:23:27

标签: bootstrap-form-helper

我正在尝试创建以下Bootsrap表单。唯一的问题是标题(如名字和姓氏)在其输入框上方太远了。我将如何降低标题以使其更靠近相应的文本框? 谢谢

Bootstrap form

'

<form class="needs-validation" novalidate>

  <div class="form-row">
    <div class="col-sm-1 mt-0 pt-0 pb-0 mb-1 ml-5">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control form-control-sm" id="validationCustom01"  value="<cfoutput>#nLast#</cfoutput>" placeholder="First name" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>

    <div class="col-sm-1 mt-0 mb-1">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control form-control-sm" id="validationCustom02" placeholder="Last name" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>

    <div class="col-sm-1 mt-0 mb-1">
      <label for="validationCustom02">Other</label>
      <input type="text" class="form-control form-control-sm" id="validationCustom02" placeholder="Other" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>  




  </div>
  <div class="form-row">
    <div class="col-md-2 mb-2 ml-5">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control form-control-sm" id="validationCustom03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-1 mb-2">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control form-control-sm" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-sm-1 mb-2">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control form-control-sm" id="validationCustom05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>

  <button class="btn btn-primary ml-5" type="submit">Submit form</button>
</form>

0 个答案:

没有答案