如何减少标签和输入字段之间的差距答案

【问题标题】：How to reduce the gap between label and input field如何减少标签和输入字段之间的差距
【发布时间】：2020-08-06 05:23:32
【问题描述】：

我有一个带有标签和输入字段的引导表单。我想知道如何减少标签和输入字段之间的差距。请检查以下代码和屏幕截图以供参考

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="form-group row">
  <label class="col-sm-1 col-form-label col-form-label-sm">First Name</label>
  <div class="col-sm-3">
    <input type="text" name="FirstName" class="form-control form-control-sm" id="TxtFirstName" placeholder="First Name" value={this.state.FirstName} required onChange={this.onChangeHandler}/>
  </div>

  <label class="col-sm-1 col-form-label col-form-label-sm">Last Name</label>
  <div class="col-sm-3">
    <input type="text" name="LastName" class="form-control form-control-sm" id="TxtLastName" placeholder="Last Name" value={this.state.LastName} required onChange={this.onChangeHandler}/>
  </div>

  <label class="col-sm-1 col-form-label col-form-label-sm">Email Id</label>
  <div class="col-sm-3">
    <input type="email" name="EmailId" class="form-control form-control-sm" id="TxtEmailId" placeholder="EmailId" value={this.state.EmailId} required onChange={this.onChangeHandler}/>
  </div>
</div>

截图：-

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4 flexbox

【解决方案1】：

您可以将pl-0 类添加到输入父类中，如果您想减少更多的差距，您可以安全地减少label 标签的max-width。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="form-group row">
  <label class="col-sm-1 col-form-label col-form-label-sm">First Name</label>
  <div class="col-sm-3 pl-0">
    <input type="text" name="FirstName" class="form-control form-control-sm" id="TxtFirstName" placeholder="First Name" value={this.state.FirstName} required onChange={this.onChangeHandler}/>
  </div>

  <label class="col-sm-1 col-form-label col-form-label-sm">Last Name</label>
  <div class="col-sm-3 pl-0">
    <input type="text" name="LastName" class="form-control form-control-sm" id="TxtLastName" placeholder="Last Name" value={this.state.LastName} required onChange={this.onChangeHandler}/>
  </div>

  <label class="col-sm-1 col-form-label col-form-label-sm">Email Id</label>
  <div class="col-sm-3 pl-0">
    <input type="email" name="EmailId" class="form-control form-control-sm" id="TxtEmailId" placeholder="EmailId" value={this.state.EmailId} required onChange={this.onChangeHandler}/>
  </div>
</div>

【讨论】：

如果您喜欢我的回答或者您从我的回答中得到了任何帮助，请不要忘记考虑投票并通过单击右箭头将此答案作为您的最佳答案，谢谢！