У меня есть проблема дизайна в форме.Что я сделал не так, что нижние края не вровень

Question

У меня проблема с дизайном в форме.Что я сделал не так, что нижние края не вровень.

<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label col-form-label-lg">CIDR-Suffix:</label>
<div class="input-group col">
<div class="input-group-prepend">
<span class="input-group-text" id="CIDRSu123">/</span>
</div>
<input type="number" min="0" max="32" class="form-control" id="CIDRSu" aria-    describedby="CIDRSu123" required>
</div>

Вот так это выглядит:

Answer 1

.col не работает с группами ввода Bootstrap 4.Вам нужно использовать сетку и размещать метку и группы ввода отдельно.

Рабочий пример:

/* re-align large form label to middle */
.form-group.row label.col-form-label-lg
{
  padding-top: calc(.5rem - 4px);
  padding-bottom: calc(.5rem - 4px);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="form-group row">

  <!-- First row: adjust as needed with your own preference -->
  <div class="col-lg-2 col-md-3 col-sm-4 col-6">
  
    <!-- Your label -->
    <label for="inputPassword" class="col-form-label col-form-label-lg">CIDR-Suffix:</label>
    
  </div>
  
  <!-- Second row automatically adjusted with col -->
  <div class="col">
  
    <!-- Your input-group -->
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="CIDRSu123">/</span>
      </div>
      <input type="number" min="0" max="32" class="form-control" id="CIDRSu" aria-describedby="CIDRSu123" name="inputPassword" required>
    </div>
    
  </div>

</div>