【发布时间】：2019-09-18 15:36:29
【问题描述】：
我有一个用户注册表单（Bootstrap 4 - 在 Razor 模板中）
我会根据用户填写的内容隐藏表单的某些部分。我的注册表有 2 个步骤。这是第二步。
如果用户选择了一个没有国家的国家。我将隐藏状态。
这就是问题所在。
如果我在隐藏状态时编写in here 之类的代码，则该部分将丢失。
我使用 float-left 编写了如下代码。如果我隐藏任何部分，其他部分会移动并填充缺失的部分。
<div class="container py-5 bg-warning">
<div class="row">
<div id="register" class="col-md-10 mx-auto">
<form asp-action="Create" method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
@if (@Model.StateList != null)
{
<div class="form-group col-sm-6 float-left">
<label asp-for="State"></label>
@Html.DropDownListFor(m => m.StateList, @Model.StateList, "- Please Select -",
new {@class = "form-control"})
<span asp-validation-for="State" class="text-danger fixed-span"></span>
</div>
}
<div class="form-group col-sm-6 float-left">
<label asp-for="City"></label>
<input asp-for="City" class="form-control" />
<span asp-validation-for="City" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="Phone"></label>
<input asp-for="Phone" class="form-control" />
<span asp-validation-for="Phone" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="Company"></label>
<input asp-for="Company" class="form-control" />
<span asp-validation-for="Company" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="TaxId"></label>
<input asp-for="TaxId" class="form-control" />
<span asp-validation-for="TaxId" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="Email"></label>
<input asp-for="Email" class="form-control" />
<span asp-validation-for="Email" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="Gender"></label>
@Html.DropDownListFor(m => m.Gender, @Model.GenderList, "- Please Select -",
new {@class = "form-control"})
<span asp-validation-for="Gender" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="ConfirmPassword"></label>
<input asp-for="ConfirmPassword" class="form-control" />
<span asp-validation-for="ConfirmPassword" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="AboutJob"></label>
<input asp-for="AboutJob" class="form-control" />
<span asp-validation-for="AboutJob" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="PostCode"></label>
<input asp-for="PostCode" class="form-control" />
<span asp-validation-for="PostCode" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="Town"></label>
<input asp-for="Town" class="form-control" />
<span asp-validation-for="Town" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="Address"></label>
<input asp-for="Address" class="form-control" />
<span asp-validation-for="Address" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="Celluar"></label>
<input asp-for="Celluar" class="form-control" />
<span asp-validation-for="Celluar" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="TaxOffice"></label>
<input asp-for="TaxOffice" class="form-control" />
<span asp-validation-for="TaxOffice" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="TaxAddress"></label>
<input asp-for="TaxAddress" class="form-control" />
<span asp-validation-for="TaxAddress" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="FullName"></label>
<input asp-for="FullName" class="form-control" />
<span asp-validation-for="FullName" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="Password"></label>
<input asp-for="Password" class="form-control" />
<span asp-validation-for="Password" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="Birthday"></label>
<input asp-for="Birthday" class="form-control" />
<span asp-validation-for="Birthday" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="CitizenId"></label>
<input asp-for="CitizenId" class="form-control" />
<span asp-validation-for="CitizenId" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="Website"></label>
<input asp-for="Website" class="form-control" />
<span asp-validation-for="Website" class="text-danger fixed-span"></span>
</div>
<button type="submit" class="btn btn-primary px-4 float-right">Kayıt Ol</button>
</form>
</div>
</div>
如您所知，输入下的错误消息有一个 span 元素。如果我有错误，这个表格看起来很糟糕。你有什么想法可以解决图片中的这个问题
【问题讨论】：
-
这和图片不一样，你没有使用选择框。
-
我截取了其中的一部分。不是整页。您是指链接中的代码吗？
-
你说“如果用户选择一个国家”，但没有选择框和类似 json 对象的东西。
-
我想你没有看我上一句话 :) “我的注册表有 2 步。这是第二步。”
标签： html css twitter-bootstrap razor bootstrap-4