使搜索表单内联显示 Bootstrap 5

Question

我正在尝试使用 Bootstrap 5 和以下代码在页面中创建搜索表单：

        <div class="row mb-5">
            <div class="col-lg-10 offset-lg-1">
                <form class="form-inline" role="form">
                    <label for="field">Find all where...</label>
                    <select id="field" class="form-select">
                        <option value="company_name" selected>Company Name</option>
                        <option value="federal_ein" selected>EIN</option>
                        <option value="state">State</option>
                        <option value="city">City</option>
                    </select>
                    <label for="term">includes...</label>
                    <input type="text" class="form-control" id="term" placeholder="Enter full/partial term" name="term">
                    <button type="submit" class="btn btn-primary btn-lg">Search</button>
                </form>
            </div>
        </div>

我希望表单是内联的，文本框被拉伸以填充行中未使用的 space。我不知道如何实现这一目标。有什么帮助吗？谢谢！

Answer 1

这段代码似乎运行良好。谢谢！

<form id="frmSearch" name="frmSearch" role="form" class="was-validated">
            <div class="row mb-4">
                <div class="col-lg-2 offset-lg-1 text-end">Find companies where...</div>
                <div class="col-lg-2 text-start">
                    <select ID="ddlType" Class="form-control rounded" required>
                        <option value="" selected>Search by...</option>
                        <option value="company_name">Company Name</option>
                        <option value="city">City</option>
                        <option value="federal_ein">EIN</option>
                        <option value="state">State</option>
                    </select>
                </div>
                <div class="col-lg-1 text-center">contains...</div>
                <div class="col-lg-4 d-flex">
                    <input type="text" ID="tbTerm" class="form-control rounded text-black" required />
                </div>
                <div class="col-lg-1 mx-auto">
                    <button type="submit" ID="btnSearch" class="btn-success btn text-white">Search</button>
                </div>
            </div>
        </form>

使搜索表单内联显示 Bootstrap 5

Making a search form display inline with Bootstrap 5

forms

bootstrap-5