Bootstrap / CSS - 输入、按钮和选择在同一行

Question

我正在尝试使用 bootstrap/css 将输入、按钮和选择放在同一行中，但 选择 根据其内容大小，将转到下一行，如下。我能做什么？

这是 HTML 的一部分：

<div class="form-inline">
    <div class="form-group">
        <div class="input-group">
            <input type="text" class="form-control" v-model="ClienteBusca.value" placeholder="Buscar cliente">
            <span class="input-group-btn">
                <button type="button" v-on:click.prevent="buscarCliente" class="btn btn-primary">Buscar</button>
            </span>
        </div>
    </div>
    <div class="form-group">
        <select class="form-control" id="selectedCliente">
            <option v-for="cliente in Clientes" v-bind:value="cliente">{{cliente.nome}}</option>
        </select>
    </div>
</div>

另外，这里是演示：https://jsfiddle.net/taianrj/r81tqbm9/1/

Answer 1

form-inline 的问题是它在选择上应用width:auto;，并且在您的场景中，内容很大并且第一行中没有足够的空间，因此它从新行开始。您可以像这样重构您的标记，而不是使用 form-inline：

        <form>
            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Buscar cliente">
                            <span class="input-group-btn">
                            <button type="button" class="btn btn-primary">Buscar</button>
                        </span>
                        </div>
                    </div>
                </div>
                <div class="col-sm-8">
                    <div class="form-group">
                        <select class="form-control" id="selectedCliente">
                            <option>test test test test test test test test test test test test test test test
                                test test test test test test test test test test test test test test test
                                test test test test test test test test test test test test test test test
                            </option>
                        </select>
                    </div>
                </div>

            </div>
        </form>

Answer 2

使用最新的 Bootstrap 4.1（不是 alpha），并将 form-inline 切换为 d-flex...

           <div class="d-flex">
                    <div class="form-group">
                        <div class="input-group">
                            <input type="text" class="form-control" v-model="ClienteBusca.value" placeholder="Buscar cliente">
                            <span class="input-group-btn">
                                <button type="button" v-on:click.prevent="buscarCliente" class="btn btn-primary">Buscar</button>
                            </span>
                        </div>
                    </div>
                    <div class="form-group">
                        <select class="form-control" id="selectedCliente">
                            <option v-for="cliente in Clientes" v-bind:value="cliente">test test test test test test test test test test test test test test test </option>
                        </select>
                    </div>
           </div>

https://www.codeply.com/go/fjZ7U8tbIH