начальная загрузка 4 формы

Question

Как сделать эту форму, используя стандартные инструменты начальной загрузки 4.3?

Это то, что я мог сделать.Но безуспешно.

                <div class="col-12 mb-3 form-inline">
                    <div class="form-group">
                        <label for="trade_number" class="mr-2">Цена начальная</label>
                        <input type="text" class="form-control" placeholder="От">
                        <div class="mx-2">-</div>
                        <input type="text" class="form-control" placeholder="До">
                    </div>
                </div>
                <div class="col-12 mb-3 form-inline">
                    <div class="form-group">
                        <label for="trade_number" class="mr-2">Цена текущая</label>
                        <input type="text" class="form-control" placeholder="От">
                        <div class="mx-2">-</div>
                        <input type="text" class="form-control" placeholder="До">
                    </div>
                </div>

но я получаю это

Answer 1

Ответ, предоставленный предыдущим сообщением, работает только для заданных ярлыков, если размер ярлыка увеличивается или уменьшается, он смещается.Также рекомендуется использовать row и col, чтобы избежать неожиданных результатов при случайном использовании.Класс form-inline будет добавлять элементы один за другим в одну строку, поэтому он не будет иметь представления о длине и обосновании элементов в следующей строке.Так что это работает лучше в тех случаях, когда у вас есть встроенные формы.Лучшим подходом в этом случае будет размещение сетки с использованием row и col.Это также дает отзывчивость, основанную на размере устройства, если это то, что вы можете захотеть.Ниже приведен фрагмент кода, а также ссылка на кодовый блок для него.

https://codepen.io/R1112/pen/LYPvXyg

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="row m-3">
  <div class="col-12 m-3">
    <div class="row">
      <div class="col-3"><label for="trade_number" class="float-left">Цена начальная</label></div>
      <div class="col-4"><input type="text" class="form-control" placeholder="От"></div>
      <div class="col-1">
        <div class="align-middle">-</div>
      </div>
      <div class="col-4"><input type="text" class="form-control" placeholder="До"></div>
    </div>
  </div>
  <div class="col-12 m-3">
    <div class="row">
      <div class="col-3"><label for="trade_number" class="float-left">Цена текущая</label></div>
      <div class="col-4"><input type="text" class="form-control" placeholder="От"></div>
      <div class="col-1">
        <div class="text align-middle">-</div>
      </div>
      <div class="col-4"><input type="text" class="form-control" placeholder="До"></div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Answer 2

Вы можете попробовать это.

<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="col-12 mb-3 form-inline">
                    <div class="form-group row">
                        <label for="trade_number" class="mr-2 col-mb-4">Цена начальная</label>
                        <input type="text" class="form-control " placeholder="От">
                        <div class="mx-2">-</div>
                        <input type="text" class="form-control" placeholder="До">
                    </div>
                </div>
                <div class="col-12 mb-3 form-inline">
                    <div class="form-group">
                        <label for="trade_number" class="mr-2">Цена текущая</label>
                        <input type="text" class="form-control" placeholder="От">
                        <div class="mx-2">-</div>
                        <input type="text" class="form-control" placeholder="До">
                    </div>
                </div>