时间戳

首页 > 解决方案 > Bootstrap - 内联表单无法正确显示

html - Bootstrap - 内联表单无法正确显示

问题描述

我有一个包含 2text和 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>

标签： htmlbootstrap-4

解决方案

使用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

推荐阅读