Bootstrap 多个内联输入

Question

我很难将两个和一个文本输入放在表单的一行中。我能够获得两个内联选择，但文本输入很顽固。这是当前代码的样子：

<form role='form' action='#' method='post'>
    <div class='form-group'>
        <label for='query-bar' class='sr-only'></label>
        <input type='text' class='form-control' placeholder='Enter search query..' name='query-bar' />
    </div>
    <div class='form-inline'>
        <div class='form-group'>
            <select name='builder-columns' class='form-control'>
                <option selected disabled value='none'>Columns</option>
                <option></option>
            </select>
        </div>
        <div class='form-group'>
            <select name='builder-operators' class='form-control'>
                <option selected disabled value='none'>Operators</option>
            </select>
        </div>
        <div class='form-group'>
            <label for='builder-filter' class='sr-only'></label>
            <input type='text' placeholder='Filter' name='builder-filter' class='form-control' />
        </div>
    </div>
</form>

Answer 1

您可以使用以下内容：

<div class='form-inline row'>
    <div class='form-group col-sm-4'>
        <select name='builder-columns' class='form-control'>
            <option selected disabled value='none'>Columns</option>
        </select>
    </div>
    <div class='form-group col-sm-4'>
        <select name='builder-operators' class='form-control'>
            <option selected disabled value='none'>Operators</option>
        </select>
    </div>
    <div class='form-group col-sm-4'>
        <label for='builder-filter' class='sr-only'></label>
        <input type='text' placeholder='Filter' name='builder-filter' class='form-control' />
    </div>
</div>

.form-inline .form-control {
    width: 100%;
}

class row 被添加到 form-inline 元素，class col-sm-4 被添加到 form-group 元素。此外，.form-control 元素的宽度设置为 100% 以覆盖适用于某些屏幕尺寸的 width: auto。

Example Here

Bootstrap 多个内联输入

Bootstrap multiple inputs inline

html

css

twitter-bootstrap

twitter-bootstrap-3