Как уменьшить разрыв между меткой и полем ввода - PullRequest
Новая
       21

Как уменьшить разрыв между меткой и полем ввода

0 голосов
/ 23 апреля 2020

У меня есть форма Bootstrap с меткой и полем ввода. Я хотел бы знать, как уменьшить разрыв между меткой и полем ввода. пожалуйста, проверьте ниже код и скриншот для вашей справки 

<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>

снимок экрана: -

enter image description here

1 Ответ

0 голосов
/ 23 апреля 2020

вы можете добавить pl-0 класс к входному родительскому классу, и если вы хотите уменьшить больше пробела, вы можете безопасно уменьшить max-width из label тега. 

<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>
...