Bootstrap / Css - Input, Button And Select In The Same Line

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 ca

Solution 1:

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><divclass="row"><divclass="col-sm-4"><divclass="form-group"><divclass="input-group"><inputtype="text"class="form-control"placeholder="Buscar cliente"><spanclass="input-group-btn"><buttontype="button"class="btn btn-primary">Buscar</button></span></div></div></div><divclass="col-sm-8"><divclass="form-group"><selectclass="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>

Solution 2:

Use the latest Bootstrap 4.1 (not alpha), and switch the form-inline to 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">testtesttesttesttesttesttesttesttesttesttesttesttesttesttest </option>
                        </select>
                    </div>
           </div>

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