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#date-range