Как выровнять текстовое поле и пометить одну строку с помощью начальной загрузки

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>

И это будет выглядеть так: