Forms Bootstrap中的响应式搜索表单

我正在尝试使用Twitter引导构建一个简单的水平搜索和过滤表单，如所附图片所示。 我正试图建立它，使其适应不同的屏幕大小，如图所示。我从代码中得到的结果与我的期望不符

<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>

搜索：
搜寻
重置
过滤器：
所有部分
试验
所有类别
试验

我的代码可在以下位置找到：

---

您可以使用

col-*-offset

类来实现所需的功能

---

演示：感谢您的快速响应！这似乎几乎可以完成任务。然而，我有两个问题：1。调整屏幕大小时，有一段时间重置按钮落在搜索按钮下方，而不是两个按钮落在搜索输入字段下方。是否有某种方式可以指示引导程序将这两个按钮视为一个元素？2.当一个元素低于另一个元素时，它们就“粘”在一起。但是，它们之间至少需要有一些间距。如何实现这一点？将按钮容器更改为

col-md-3

，这样它就有足够的空间并且不会被包装。对于边距，我认为您需要使用CSS自定义表单输入：

。表单组输入，按钮，选择{margin bottom:3px；}

我更新了引导层：