首页 > 其他 > 详细

关于boostrap 排版问题

时间:2019-11-12 16:54:43      阅读:96      评论:0      收藏:0      [点我收藏+]

直接上代码

    <div class="card-header">
        <div class="page-header">
            <div class="container">
                <form class="form-horizontal" role="form">
                    <div class="row form-group">
                        <div class="col-md-6 col-sm-12 col-xs-12">
                            <label for="" class="col-sm-2 control-label text-right">品牌</label>
                            <div class="col-sm-10">
                                @Html.DropDownList("brandId", ViewData["brand_id"] as IEnumerable<SelectListItem>, "请选择", new { @class = "form-control" })
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-12 col-xs-12">
                            <label for="" class="col-sm-2 control-label text-right">城市</label>
                            <div class="col-sm-10">
                                @Html.DropDownList("cityId", ViewData["city_id"] as IEnumerable<SelectListItem>, "请选择", new { @class = "form-control" })
                            </div>
                        </div>
                    </div>

                    <div class="row form-group">
                        <div class="col-md-6 col-sm-12 col-xs-12">
                            <label for="" class="col-sm-2 control-label text-right">门店</label>
                            <div class="col-sm-10">
                                @Html.DropDownList("restId", ViewData["rest_id"] as IEnumerable<SelectListItem>, "请选择", new { @class = "form-control" })
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-12 col-xs-12">
                            <label for="" class="col-sm-2 control-label text-right">订单类型</label>
                            <div class="col-sm-10">
                                @Html.DropDownList("checkType", ViewData["check_type"] as IEnumerable<SelectListItem>, "请选择", new { @class = "form-control" })
                            </div>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-md-6 col-sm-12 col-xs-12">
                            <label for="" class="col-sm-2 control-label text-right">姓名</label>
                            <div class="col-sm-10">
                                @Html.Editor("custName", "", new { htmlAttributes = new { @class = "form-control", maxlength = "20" } })
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-12 col-xs-12">
                            <label for="" class="col-sm-2 control-label text-right">手机号</label>
                            <div class="col-sm-10">
                                @Html.Editor("custPhone", "", new { htmlAttributes = new { @class = "form-control", maxlength = "11" } })
                            </div>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-md-6 col-sm-12 col-xs-12">
                            <label for="" class="col-sm-2 control-label text-right">下单时间</label>
                            <div class="col-sm-5">
                                <div class="input-group date">
                                    <input type="text" class="form-control onlyDate" id="startDate">
                                    <span class="input-group-addon">
                                        <i class="glyphicon glyphicon-calendar"></i>
                                    </span>
                                </div>
                            </div>
                            <div class="col-sm-5">
                                <div class="input-group date">
                                    <input type="text" class="form-control onlyDate" id="endDate">
                                    <span class="input-group-addon">
                                        <i class="glyphicon glyphicon-calendar"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-12 col-xs-12">
                            <label for="" class="col-sm-2 control-label text-right">支付渠道</label>
                            <div class="col-sm-10">
                                @Html.DropDownList("PaymentType", ViewData["payment_type"] as IEnumerable<SelectListItem>, "请选择", new { @class = "form-control" })
                            </div>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-sm-offset-4 col-sm-2">
                            <button type="button" id="btnSearch" class="btn btn-block btn-small btn-info">检索</button>
                        </div>
                        <div class="col-sm-2">
                            <button type="button" id="btnClear" class="btn btn-block btn-small btn-info">清空</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

 

 

显示效果

 

技术分享图片

关于boostrap 排版问题

原文:https://www.cnblogs.com/qiqiqiqiqia/p/11842923.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!