html - bootstrap3 中的内联表单

Question

我试图在 (bootstrap-css) col-md 中让 2 个输入字段彼此相邻，但似乎无法正确处理。

这是我目前所拥有的 https://jsfiddle.net/9hrx59bd/

当我将两个输入字段放在同一个输入组中时，通过删除它也无济于事:

    ...
    </div>
    <div class="input-group ">

如何让它们并排放置并使用全宽？

Answer 1

您需要将两个输入组都设为 col-md-6，结果如下:link

<div class="row">
    <form class="form-inline" id="searchform" action=""  accept-charset="utf-8" method="post">
        <div class="input-group  col-md-6 col-sm-6 col-xs-6">
            <input class=" form-control " placeholder="city" id="location"  type="text" name="location">
        </div>
        <div class="input-group  col-md-6 col-sm-6 col-xs-6">
            <input class="search-query form-control newtab-search-text" placeholder="keywords or company name" id="kw"  type="text" name="job">
            <span class="input-group-btn">
                <button class="btn btn-danger" type="submit">
                    <span class=" glyphicon glyphicon-search" ></span>
                </button>
            </span>
        </div>
    </form>
</div>

编辑 我通过添加 col-sm-6 和 col-xs-6 让它在较小的屏幕上工作