c# - 如何使用 Bootstrap 在同一行中对齐文本框和标签

Question

我想在同一行中对齐 2 个测试框和下拉菜单，并在这些文本框下方显示标签。我是怎么做到的。

我想显示这样的东西

在我的代码中，文本框一个一个地显示在另一个下方。

 <div class="form-horizontal ">
    @Html.TextBoxFor(model => model.City, new{ placeholder = "City" })
    @Html.ValidationMessageFor(model => model.City)
    <div><small class="form-text text-muted">City</small></div>
    @Html.DropDownListFor(x => x.State, PressRoom.Helpers.StateNamesList.GetStatesList(), new { placeholder = "--Select State--" })
    @Html.ValidationMessageFor(model => model.State)
    <div><small class="form-text text-muted">State</small></div>

    @Html.TextBoxFor(model => model.ZipCode, new { placeholder = "Zip Code" })
    @Html.ValidationMessageFor(model => model.ZipCode)
    <div><small class="form-text text-muted">Zip</small></div>
</div>
                    

Answer 1

借助 bootstrap4，您可以使用 form-row 或仅使用常规 row css 类来实现。

<form>
    <!-- you can use "row" class here -->
    <div class="form-row">
        <div class="col">
            @Html.TextBoxFor(x => x.City, new { @class = "form-control" })
            @Html.ValidationMessageFor(x => x.City)
            @Html.Labelfor(x => x.City, new { @class = "text-muted small" })
        </div>
        <div class="col">
            @Html.DropDownListFor(x => x.State, 
                PressRoom.Helpers.StateNamesList.GetStatesList(), 
                "-- Select a state --",
                new { @class = "form-control" })
            @Html.ValidationMessageFor(x => x.State)
            @Html.Labelfor(x => x.State, new { @class = "text-muted small" })
        </div>
        <div class="col">
            @Html.TextBoxFor(x => x.ZipCode, new { @class = "form-control" })
            @Html.ValidationMessageFor(x => x.ZipCode)
            @Html.Labelfor(x => x.ZipCode, new { @class = "text-muted small" })
        </div>
    </div>
</form>

它看起来像: