<div class="panel panel-primary">
<div class="panel-heading">垂直布局</div>
<div class="panel-body">
<form role="form" style="width: 500px">
<div class="form-group">
<label class="control-label">订单编号</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label class="control-label">配送地址</label>
<input type="text" class="form-control"/>
</div>
</form>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">水平布局</div>
<div class="panel-body">
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-1">订单编号</label>
<div class="col-xs-5">
<input type="text" class="form-control">
</div>
<label class="control-label col-xs-1">配送地址</label>
<div class="col-xs-5">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-1">下单用户</label>
<div class="col-xs-3">
<input type="text" class="form-control">
</div>
<label class="control-label col-xs-1">收件人</label>
<div class="col-xs-3">
<input type="text" class="form-control">
</div>
<label class="control-label col-xs-1">收件地址</label>
<div class="col-xs-3">
<input type="text" class="form-control">
</div>
</div>
</form>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">内联表单</div>
<div class="panel-body">
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="name">订单编号</label>
<input type="text" class="form-control" id="name" placeholder="请输入订单编号"/>
</div>
<div class="form-group">
<label class="sr-only" for="addr">下单人</label>
<input type="text" class="form-control" id="addr" placeholder="请输入下单人"/>
</div>
<div class="form-group">
<button class="btn btn-default">开始查询</button>
</div>
</form>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。