Bootstrap / CSS-输入，按钮并在同一行中选择 [英] Bootstrap / CSS - Input, button and select in the same line

问题描述

我正在尝试使用bootstrap / css将输入，按钮和选择放在同一行中，但是 select （取决于其内容大小）将转到下一行，如下。我该怎么办？

I'm trying to put an input, a button and a select in the same line using bootstrap/css, but the select, depending on its content size, is going to the next line, as follow. What can I do?

这是HTML的一部分：

Here is the part of the 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/

推荐答案

form-inline 的问题是，它对select和as应用了 width：auto; 在您的方案中，内容很大，并且第一行没有足够的空间，因此它是从新行开始的。除了使用表单内联之外，您还可以像这样重组标记：

Problem with form-inline is that it's applying width:auto; on the select and as in your scenario content is large and enough space is not available in the first line so it's starting from the new line. Instead of using form-inline you can restructure your markup like that:

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

这篇关于Bootstrap / CSS-输入，按钮并在同一行中选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！