html - 如何在 Bootstrap 中内联显示两个字段？

Question

我有一个 forw，其中我需要显示彼此靠近的两个字段:select + input。我的代码是:

<div role="form">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Enter date" id="maps-filter-input-date">
    </div>
    <div class="form-group" id="maps-filter-select-track">
        <select class="form-control" class="display-inline-block">
            <option>Select date</option>
        </select>
        <input type="text" class="form-control" placeholder="Enter date">
    </div>
    <div class="form-group" id="maps-filter-select-track">
        <select class="form-control">
            <option>Select date</option>
        </select>
        <input type="text" class="form-control" placeholder="Enter date">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</div>

看起来像这样:

用黑色显示它应该在的地方。那么是否可以使用默认的 Bootstrap 类呢？

Answer 1

来自 Bootstrap 文档:

Add .form-inline to your for left-aligned and inline-block controls.

您还需要为表单元素设置自定义宽度，请参阅详细信息 here