Jquery 手机引导表

我刚开始学习bootstrap，我有点陷入了一种状态。该表单在平板电脑视图中看起来不错，但在手机上看起来很糟糕

任何帮助，我需要添加什么，使它看起来很好的手机以及

我已经用js fiddle创建了一个表单 下面是html代码

搜索表
.搜索{
最大宽度：800px；
利润率：10px；
}
搜索词：




年份：
月份：




出生国：




教育程度：




包括性别：




搜寻
重置

您忘记添加

，也避免使用

，请改用

。另外，像

col sm-*

这样的类也应该在行内的

上使用。我正确地使用Bootstrap的类重写了您的表单，现在在所有设备上看起来都很好

<div class="container">
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12 form-group">
            <div class="col-md-3 col-sm-3 col-xs-3 text-right">
                <label for="txtSearch">Search term(s):</label>
            </div>
            <div class="col-md-9 col-sm-9 col-xs-9">
                <input class="form-control input-sm" type="text" id="txtSearch">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12 form-group">
            <div class="col-md-3 col-sm-3 col-xs-3 text-right">
                <label for="ddl_year">Year:</label>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-3">
                <select class="form-control input-sm" id="ddl_year"></select>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-3 text-right">
                <label for="ddl_month">Month:</label>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-3">
                <select class="form-control input-sm" id="ddl_month"></select>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12 form-group">
            <div class="col-md-3 col-sm-3 col-xs-3 text-right">
                <label for="ddl_atoztopics">Birth Country:</label>
            </div>
            <div class="col-md-9 col-sm-9 col-xs-9">
                <select class="form-control input-sm" id="ddl_atoztopics"></select>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12 form-group">
            <div class="col-md-3 col-sm-3 col-xs-3 text-right">
                <label for="ddl_orgunit">Education Level:</label>
            </div>
            <div class="col-md-9 col-sm-9 col-xs-9">
                <select class="form-control input-sm" id="ddl_orgunit"></select>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12 form-group">
            <div class="col-md-3 col-sm-3 col-xs-3 text-right">
                <label for="chk_spotlights">Include Gender:</label>
            </div>
            <div class="col-md-9 col-sm-9 col-xs-9">
                <input id="chk_spotlights" type="checkbox">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12 form-group">
            <div class="col-md-6 col-sm-6 col-xs-6 text-right">
                <button class="btn btn-default">Search</button> 
            </div>
            <div class="col-md-6 col-sm-6 col-xs-6 text-left">
                <button class="btn btn-default">Reset</button>  
            </div>
        </div>
    </div>
</div>

搜索词：
年份：
月份：
出生国：
教育程度：
包括性别：
搜寻
重置

---

有关更多信息和示例，请查看

不确定为什么您有

标记，在引导中肯定不需要这些标记。您可能也希望使用一些

来帮助分割行。