bootstrap 查询条件布局-优快云博客

本文链接：https://blog.youkuaiyun.com/ligengdipan/article/details/103674686

本文介绍了如何利用Bootstrap的栅格系统和组件，创建响应式的查询条件布局。通过实例代码展示，实现了在不同设备上自适应显示的效果，确保在手机、平板和桌面端都有良好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如下：

代码：

 <div class="container-fluid">
        <div class="row">
           
                <div class="panel panel-default">
                    <div class="panel-heading">
                         <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> 条件查找
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12">
                                <div class="form-horizontal">
                                    <div class="form-group">
                                        <div class="col-md-4 control-label" for="select">归属地</div>
                                        <div class="col-md-4">
                                            <select ID="ddlsheng" class="form-control">
                                                <option Value="0">全国</option>
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                          
                                            <select ID="ddlshi" class="form-control">
                                            </select>
                                                                            </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12">
                                <div class="form-horizontal">
                                    <div class="form-group">
                                        <div class="col-md-4 control-label" for="select">余额</div>
                                        <div class="col-md-4">
                                            <input type="text" class="form-control" runat="server" id="Balance_start"
                                                name="Balance_start" />
                                        </div>
                                        <div class="col-md-4">
                                            <input type="text" class="form-control" runat="server" id="Balance_end"
                                                name="Balance_end" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12">
                                <div class="form-horizontal">
                                    <div class="form-group">
                                        <div class="col-md-4 control-label" for="select">是否VIP</div>
                                        <div class="col-md-4">
                                            <select ID="select_IsVIP" runat="server" AutoPostBack="True"