HTML
CSS
JavaScript
HTML
<!DOCTYPE html>
<html lang="zh">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>搜索布局 - 光年(Light Year Admin)后台管理系统模板</title>
  <link rel="icon" href="favicon.ico" type="image/ico">
  <meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
  <meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
  <meta name="author" content="yinqi">
  <link href="http://lyear.itshubao.com/iframe/v4/css/bootstrap.min.css" rel="stylesheet">
  <link href="http://example.itshubao.com/demo/css/materialdesignicons.min.css" rel="stylesheet">
  <!--日期选择插件-->
  <link rel="stylesheet" href="http://lyear.itshubao.com/iframe/v4/js/bootstrap-datepicker/bootstrap-datepicker3.min.css">
  <link href="http://lyear.itshubao.com/iframe/v4/css/style.min.css" rel="stylesheet"></head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-12">
          <div class="card">
            <header class="card-header">
              <div class="card-title">搜索布局</div>
			</header>
			<div class="card-toolbar">
              <form class="search-bar form-row" method="get" action="#!" role="form">
			  <div class="col-search-box">
                <div class="form-group form-row">
                  <label class="col-search-text col-form-label text-right">邮箱：</label>
                  <div class="col-search-input">
                    <input type="text" class="form-control" name="email" value="" placeholder="请输入要搜索邮箱..." />
			  	</div>
                </div>
              </div>
              <div class="col-search-box">
                <div class="form-group form-row">
                  <label class="col-search-text col-form-label text-right">用户姓名：</label>
                  <div class="col-search-input">
                    <input class="form-control" type="text" name="real_name" placeholder="请输入用户姓名" value="" />
			  	</div>
                </div>
              </div>
              <div class="col-search-box">
                <div class="form-group form-row">
                  <label class="col-search-text col-form-label text-right">工作单位：</label>
                  <div class="col-search-input">
                    <input class="form-control" type="text" name="company_name" placeholder="请输入工作单位" value="" />
			  	</div>
                </div>
              </div>
              <div class="col-search-box">
                <div class="form-group form-row">
                  <label class="col-search-text col-form-label text-right">收货地址：</label>
                  <div class="col-search-input">
                    <input class="form-control" type="text" name="address" placeholder="请输入收货地址" value="" />
			  	</div>
                </div>
              </div>
              <div class="col-search-box">
                <div class="form-group form-row">
                  <label class="col-search-text col-form-label text-right">起止日期：</label>
                  <div class="col-search-input">
                    <div class="input-group" data-provide="datepicker">
                      <input type="text" name="start_arrival_date" class="form-control" autocomplete="off" placeholder="起始日期" value="" />
                      <div class="input-group-prepend input-group-append">
                        <span class="input-group-text">至</span></div>
                      <input type="text" name="end_arrival_date" class="form-control" autocomplete="off" placeholder="截止日期" value="" />
			  	  </div>
                  </div>
                </div>
              </div>
              <div class="col-search-box">
                <div class="form-group form-row">
                  <label class="col-search-text col-form-label text-right">订单号：</label>
                  <div class="col-search-input">
                    <input class="form-control" type="text" name="order_no" placeholder="请输入搜索的提单号" value="" />
			  	</div>
                </div>
              </div>
              <div class="col-search-box">
                <div class="form-group form-row">
                  <label class="col-search-text col-form-label text-right">排序规则：</label>
                  <div class="col-search-input">
                    <div class="input-group" data-provide="datepicker">
                      <select name="ordername" class="form-control">
                        <option value="id" selected>费用ID</option>
                        <option value="order_date">下单日期</option>
			  		</select>
                      <div class="input-group-prepend input-group-append">
                        <span class="input-group-text">~</span>
			  		</div>
                      <select name="orderby" class="form-control">
                        <option value="asc" selected>正序</option>
                        <option value="desc">倒序</option>
			  		</select>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-search-btn-box-3 text-right">
                <div class="form-group">
                  <button type="submit" class="btn btn-primary mr-2">
                    <i class="mdi mdi-magnify"></i>搜索
			  	</button>
                  <a class="btn btn-default reset-btn" href="javascript:location.href=$('.search-bar').attr('action')">重置</a>
			  	</div>
              </div>
			  </form>
			</div>
<hr>
<div class="card-toolbar">
              <form class="search-bar form-row" method="get" action="#!" role="form">
			  <div class="col-search-box">
                <div class="form-group form-row">
                  <label class="col-search-text col-form-label text-right">邮箱：</label>
                  <div class="col-search-input">
                    <input type="text" class="form-control" name="email" value="" placeholder="请输入要搜索邮箱..." />
			  	</div>
                </div>
              </div>
              <div class="col-search-box">
                <div class="form-group form-row">
                  <label class="col-search-text col-form-label text-right">用户姓名：</label>
                  <div class="col-search-input">
                    <input class="form-control" type="text" name="real_name" placeholder="请输入用户姓名" value="" />
			  	</div>
                </div>
              </div>
              <div class="col-search-box">
                <div class="form-group form-row">
                  <label class="col-search-text col-form-label text-right">工作单位：</label>
                  <div class="col-search-input">
                    <input class="form-control" type="text" name="company_name" placeholder="请输入工作单位" value="" />
			  	</div>
                </div>
              </div>
              <div class="col-search-box">
                <div class="form-group form-row">
                  <label class="col-search-text col-form-label text-right">收货地址：</label>
                  <div class="col-search-input">
                    <input class="form-control" type="text" name="address" placeholder="请输入收货地址" value="" />
			  	</div>
                </div>
              </div>
              <div class="col-search-box">
                <div class="form-group form-row">
                  <label class="col-search-text col-form-label text-right">起止日期：</label>
                  <div class="col-search-input">
                    <div class="input-group" data-provide="datepicker">
                      <input type="text" name="start_arrival_date" class="form-control" autocomplete="off" placeholder="起始日期" value="" />
                      <div class="input-group-prepend input-group-append">
                        <span class="input-group-text">至</span></div>
                      <input type="text" name="end_arrival_date" class="form-control" autocomplete="off" placeholder="截止日期" value="" />
			  	  </div>
                  </div>
                </div>
              </div>
              <div class="col-search-box">
                <div class="form-group form-row">
                  <label class="col-search-text col-form-label text-right">排序规则：</label>
                  <div class="col-search-input">
                    <div class="input-group" data-provide="datepicker">
                      <select name="ordername" class="form-control">
                        <option value="id" selected>费用ID</option>
                        <option value="order_date">下单日期</option>
			  		</select>
                      <div class="input-group-prepend input-group-append">
                        <span class="input-group-text">~</span>
			  		</div>
                      <select name="orderby" class="form-control">
                        <option value="asc" selected>正序</option>
                        <option value="desc">倒序</option>
			  		</select>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-search-btn-box-2 text-right">
                <div class="form-group">
                  <button type="submit" class="btn btn-primary mr-2">
                    <i class="mdi mdi-magnify"></i>搜索
			  	</button>
                  <a class="btn btn-default reset-btn" href="javascript:location.href=$('.search-bar').attr('action')">重置</a>
			  	</div>
              </div>
			  </form>
			</div>
<hr>
<div class="card-toolbar">
              <form class="search-bar form-row" method="get" action="#!" role="form">
			  <div class="col-search-box">
                <div class="form-group form-row">
                  <label class="col-search-text col-form-label text-right">邮箱：</label>
                  <div class="col-search-input">
                    <input type="text" class="form-control" name="email" value="" placeholder="请输入要搜索邮箱..." />
			  	</div>
                </div>
              </div>
              <div class="col-search-box">
                <div class="form-group form-row">
                  <label class="col-search-text col-form-label text-right">用户姓名：</label>
                  <div class="col-search-input">
                    <input class="form-control" type="text" name="real_name" placeholder="请输入用户姓名" value="" />
			  	</div>
                </div>
              </div>
              <div class="col-search-box">
                <div class="form-group form-row">
                  <label class="col-search-text col-form-label text-right">工作单位：</label>
                  <div class="col-search-input">
                    <input class="form-control" type="text" name="company_name" placeholder="请输入工作单位" value="" />
			  	</div>
                </div>
              </div>
              <div class="col-search-box">
                <div class="form-group form-row">
                  <label class="col-search-text col-form-label text-right">起止日期：</label>
                  <div class="col-search-input">
                    <div class="input-group" data-provide="datepicker">
                      <input type="text" name="start_arrival_date" class="form-control" autocomplete="off" placeholder="起始日期" value="" />
                      <div class="input-group-prepend input-group-append">
                        <span class="input-group-text">至</span></div>
                      <input type="text" name="end_arrival_date" class="form-control" autocomplete="off" placeholder="截止日期" value="" />
			  	  </div>
                  </div>
                </div>
              </div>
              <div class="col-search-box">
                <div class="form-group form-row">
                  <label class="col-search-text col-form-label text-right">排序规则：</label>
                  <div class="col-search-input">
                    <div class="input-group" data-provide="datepicker">
                      <select name="ordername" class="form-control">
                        <option value="id" selected>费用ID</option>
                        <option value="order_date">下单日期</option>
			  		</select>
                      <div class="input-group-prepend input-group-append">
                        <span class="input-group-text">~</span>
			  		</div>
                      <select name="orderby" class="form-control">
                        <option value="asc" selected>正序</option>
                        <option value="desc">倒序</option>
			  		</select>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-search-btn-box-1 text-right">
                <div class="form-group">
                  <button type="submit" class="btn btn-primary mr-2">
                    <i class="mdi mdi-magnify"></i>搜索
			  	</button>
                  <a class="btn btn-default reset-btn" href="javascript:location.href=$('.search-bar').attr('action')">重置</a>
			  	</div>
              </div>
			  </form>
			</div>
            <div class="card-body">
              <p>这里主要演示了v4的布局写法。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="http://lyear.itshubao.com/iframe/v4/js/jquery.min.js"></script>
    <script type="text/javascript" src="http://lyear.itshubao.com/iframe/v4/js/popper.min.js"></script>
    <script type="text/javascript" src="http://lyear.itshubao.com/iframe/v4/js/bootstrap.min.js"></script>
    <!--日期选择插件-->
    <script type="text/javascript" src="http://lyear.itshubao.com/iframe/v4/js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript" src="http://lyear.itshubao.com/iframe/v4/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
    <script type="text/javascript" src="http://lyear.itshubao.com/iframe/v4/js/main.min.js"></script>
  </body>
</html>
CSS
.col-search-text {
    -ms-flex: 0 0 90px;
    flex: 0 0 90px;
    max-width: 90px;
}
.col-search-input {
    -ms-flex: 0 0 calc(100% - 90px);
    flex: 0 0 calc(100% - 90px);
    max-width: 80calc(100% - 90px);
}
@media (min-width: 768px) {
    .col-search-box {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .col-search-btn-box-1 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }
    .col-search-btn-box-2 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .col-search-btn-box-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
}
@media (max-width: 1799.98px) {
    .col-search-box {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .col-search-btn-box-1 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .col-search-btn-box-2 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .col-search-btn-box-3 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
}
@media (max-width: 999.98px) {
    .col-search-box {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .col-search-btn-box-1 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .col-search-btn-box-3 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}
@media (max-width: 599.98px) {
    .col-search-box {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .col-search-btn-box-1 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .col-search-btn-box-3 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}
JavaScript