Question

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

这是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>
            <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版），然后将public static DataTable dtProjectLedgerExport(DataTable dtToExport, string[] selectedColumns) { DataTable dt = new DataTable(); dt.Columns.Add("Supplier"); dt.Columns.Add("Supplier_No"); dt.Columns.Add("Confirmation_Number"); dt.Columns.Add("Release_Number"); dt.Columns.Add("WCO_Invoice_No"); dt.Columns.Add("WCO_Invoice_Date"); dt.Columns.Add("Customer_Billed_Amt"); dt.Columns.Add("Balance_Remaining_to_Bill"); dt.Columns.Add("Supplier_Invoice_Number"); dt.Columns.Add("Supplier_Invoice_Date"); dt.Columns.Add("Supplier_Paid_Amt"); dt.Columns.Add("Remaining_Cost_Dollar_Balance"); //temporarily set default value for non-existing rows dt.Columns["WCO_Invoice_Date"].DefaultValue = string.Empty; dt.Columns["Supplier_Invoice_Date"].DefaultValue = string.Empty; //Copy rows to dt if (dtToExport != null && dtToExport.Rows.Count > 0) dt = new DataView(dtToExport).ToTable(false, selectedColumns); return dt; }切换为form-inline ...

d-flex

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

Bootstrap / CSS-输入，按钮并在同一行中选择

2 个答案: