Поле ввода не выравнивается правильно

Question

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="container">
  <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <label for="categoryCode">Uber Eats</label>
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>

        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <label for="subCategoryCode">ABCD1</label>
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>

        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <label for="subCategoryCode">ABCD</label>
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>

        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>

        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>

        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>

        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>

        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>

        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>

        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>

        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>

        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>

        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>

        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>

        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
        </div>
      </div>
    </div>
  </div>
</div>

На месте ABCD1 я хочу поле ввода, которое должно быть отделено от приведенного ниже.

То, что я делаю, находится на месте меткидля ABCD1 я помещаю это: `

<div class="input-group">
                    <input type="text" class="form-control" aria-label="Text input with dropdown button">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>

                    </div>
                </div>`

, но вывод не то, что я ожидаю

Должно быть некоторое пространство между ними и должнобыть выровненным в ряду другой метки, которые Uber eats и ABCD

Answer 1

Расстройство произошло ранее, потому что вы взяли первую строку метки и первую строку группы ввода в одну «Форму строки».Просто разделите их на разные строки формы, и все вернется, как ожидалось.

    <!DOCTYPE html>
<html>
 <head>
  <title>test</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
 </head>
 <body>
  <div class="container">

   <!-- Added separate form row for first row which includes labels and one new group -->
   <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <label for="categoryCode">Uber Eats</label>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-append">
       <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
      </div>
     </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <label for="categoryCode">Uber Eats</label>
    </div>
   </div>
   <!-- Separated the input groups -->
   <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-append">
       <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
      </div>
     </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-append">
       <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
      </div>
     </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-append">
       <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
      </div>
     </div>
    </div>
   </div>
   <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-append">
       <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
      </div>
     </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-append">
       <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
      </div>
     </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-append">
       <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
      </div>
     </div>
    </div>
   </div>
   <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-append">
       <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
      </div>
     </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-append">
       <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
      </div>
     </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-append">
       <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
      </div>
     </div>
    </div>
   </div>
   <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-append">
       <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
      </div>
     </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-append">
       <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
      </div>
     </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-append">
       <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
      </div>
     </div>
    </div>
   </div>
   <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-append">
       <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
      </div>
     </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-append">
       <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
      </div>
     </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-append">
       <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
      </div>
     </div>
    </div>
   </div>
  </div>
 </body>
</html>

Answer 2

добавлено margin классов начальной загрузки для достижения этого

https://codepen.io/Xenio/pen/daKPNa777

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="container">
  <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <label for="categoryCode">Uber Eats</label>
      <div class="input-group mt-3">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group mb-2">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
         </div>
      </div>
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <label for="subCategoryCode">ABCD</label>
      <div class="input-group mt-3">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
        </div>
      </div>
    </div>
  </div>
</div>