как выровнять эти поля ввода с этим изображением, чтобы между ними не было разрыва

Question

Я хочу MAP PO и выбираю статус ниже указанных полей ввода без промежутка между ними, изображение прерывает поток.

Изображение:

Answer 1

Не видя ни одного вашего кода, особенно трудно дать вам прямой ответ.

Однако я предлагаю вам применить position: relative к обоим КАРТА ПО и Выбрать статус , а также к их полям ввода (возможно, поместив их все в <div> и применив положение в этом контейнере).

Тогда вы сможете использовать свойства top и bottom, а также свойства margin-bottom и margin-top для настройки позиционирования.

Подробнее о позиционировании можно прочитать по адресу: https://www.w3schools.com/css/css_positioning.asp.

Лучше всего использовать относительные единицы, такие как % и em для позиционирования, поскольку это позволяет адаптивное расположение.

Answer 2

Вы можете использовать этот код

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="row">
   <div class="col">
   <form>
  <div class="form-row">
    <div class="form-group col-4">
      <label for="inputState">Select Hardware</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-4">
      <label for="inputCity">Serial Tag</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-4">
      <label for="inputZip">Assset No.</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
    <div class="form-row">
    <div class="form-group col-4">
      <label for="inputCity">Map No</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-4">
      <label for="inputState">Slect Status</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>

  </div>
</form>
   </div>
   <div class="col-auto">
     <img src="http://via.placeholder.com/150x150" alt="" />
   </div>
</div>