Bootstrap中的响应式搜索表单

Question

我正在尝试建立一个简单的横向搜索＆amp;使用Twitter Bootstrap过滤表单，如附图所示。 我正在尝试构建它，以便它适应不同的屏幕尺寸，如图所示。我从代码中收到的结果并不符合我的期望。

<div id="search_block" class="panel-body">
<form role="form" class="form-horizontal" method="post" action="">
    <div class="form-group">
        <label class="col-xs-2 col-sm-2 col-md-1 control-label" for="v_search">Search:</label>
        <div class="col-xs-8 col-sm-8 col-md-4">
            <input type="text" placeholder="Enter Search Keywords" value="" name="v_search" id="v_search" class="form-control">
        </div>
        <div class="button-group col-xs-8 col-sm-8 col-md-2">
            <button class="btn btn-primary" value="search" name="search" type="submit">Search</button>
            <button class="btn btn-default" value="reset" name="reset" type="reset">Reset</button>
        </div>
    </div>
    <div class="form-group">
        <label class="col-xs-2 col-sm-2 col-md-1 control-label" for="filters">Filters:</label>
        <div class="col-xs-8 col-sm-8 col-md-2" id="filters">
            <select class="form-control" name="section_id">
                <option value="all">All Sections</option>
                <option value="all">Test</option>
            </select>
        </div>
        <div class="col-xs-8 col-sm-8 col-md-2">
            <select class="form-control" name="category_id">
                <option value="all">All Categories</option>
                <option value="71">Test</option>
            </select>
        </div>
    </div>
</form>

我的代码可在以下网址找到：http://jsfiddle.net/NB89d/

Answer 1

您可以使用col-*-offset类来实现您想要的目标。

演示：http://www.bootply.com/126439