Bootstrap - встроенные формы отображаются неправильно

Question

У меня есть форма, которая имеет 2 text и 1 button, чтобы позволить пользователю вводить дату поиска, и мне нужно, чтобы она отображалась в строке. Я использовал <form class="form-inline">, но он все еще не работает. Это показывает так:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="pull-right">
  <form class="form-inline" role="search" action="<?php echo base_url('report/searchDate')?>" method = "post">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Date From" name = "searchDateFrom" size="10px; ">
      <input type="text" class="form-control" placeholder="Date To" name = "searchDateTo" size="10px; ">
      <div class="input-group-btn">
        <button class="btn btn-default " type="submit" value = "searchDateTo"><i class="glyphicon glyphicon-search"></i></button>
      </div>
    </div>
  </form>
</div>

Answer 1

Использование input-daterange класс

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="input-group input-daterange">
    <input type="text" class="form-control" value="2012-04-05">
    <div class="input-group-addon">to</div>
    <input type="text" class="form-control" value="2012-04-19">
</div>

Для получения дополнительной информации: https://bootstrap -datepicker.readthedocs.io / en / latest / markup.html # диапазон дат