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%;
}
}