我想在同一行中对齐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>
答案 0 :(得分:0)
使用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>