我设计了这个形式，但问题是我希望每个三个控件各在一行中，但在我的代码中每个控件都在一行中。为什么？
我已经放置了 col-md-3，因此可以调整每行 3 个，但仍然没有。我读到 col-md-3 需要三列，而行是 12 列，所以每行应该是 4 个控件，但每行仍然只有一个控件。请帮我解决这个问题。改进它。
@using (Html.BeginForm("Create", "InspectionReport", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div class="form-horizontal">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.VelosiProjectNo, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-3">
@Html.TextBoxFor(model => model.InspectionReport.VelosiProjectNo, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.InspectionReport.VelosiProjectNo, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.VelosiReportNo, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-3">
@Html.EditorFor(model => model.InspectionReport.VelosiReportNo, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.InspectionReport.VelosiReportNo, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.Reference, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-3">
@Html.EditorFor(model => model.InspectionReport.Reference, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.InspectionReport.Reference, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.PoNo, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-3">
@Html.EditorFor(model => model.InspectionReport.PoNo, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.InspectionReport.PoNo, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.InspectionDate, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-3">
@Html.EditorFor(model => model.InspectionReport.InspectionDate, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.InspectionReport.InspectionDate, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.IssueDate, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-3">
@Html.EditorFor(model => model.InspectionReport.IssueDate, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.InspectionReport.IssueDate, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.InspectionPhase, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-3">
@Html.DropDownListFor(model => model.InspectionReport.InspectionPhase, new List<SelectListItem>
{
new SelectListItem { Text = "India", Value = "1"},
new SelectListItem { Text = "USA", Value = "2"},
new SelectListItem { Text = "Sreelanka", Value = "3"}
}, "-Select-",
new
{
@Style = "Width:500px;height:40px;",
@class = "form-control input-lg"
})
@Html.ValidationMessageFor(model => model.InspectionReport.InspectionPhase, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.InServiceInspection, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-3">
@Html.CheckBoxFor(model => model.InspectionReport.InServiceInspection)
@Html.ValidationMessageFor(model => model.InspectionReport.InServiceInspection, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.NewInduction, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-3">
@Html.CheckBoxFor(model => model.InspectionReport.NewInduction)
@Html.ValidationMessageFor(model => model.InspectionReport.NewInduction, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.HydrostaticTest, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-3">
@Html.CheckBoxFor(model => model.InspectionReport.HydrostaticTest)
@Html.ValidationMessageFor(model => model.InspectionReport.HydrostaticTest, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.DimensionalCheck, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-3">
@Html.CheckBoxFor(model => model.InspectionReport.DimensionalCheck)
@Html.ValidationMessageFor(model => model.InspectionReport.DimensionalCheck, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.ThicknessCheck, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-3">
@Html.CheckBoxFor(model => model.InspectionReport.ThicknessCheck)
@Html.ValidationMessageFor(model => model.InspectionReport.ThicknessCheck, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.Patrom, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-3">
@Html.CheckBoxFor(model => model.InspectionReport.Patrom)
@Html.ValidationMessageFor(model => model.InspectionReport.Patrom, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.Gvs, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-3">
@Html.CheckBoxFor(model => model.InspectionReport.Gvs)
@Html.ValidationMessageFor(model => model.InspectionReport.Gvs, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.Gvs, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-3">
@Html.CheckBoxFor(model => model.InspectionReport.Gvs)
@Html.ValidationMessageFor(model => model.InspectionReport.Gvs, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.FinalOgraInspection, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-3">
@Html.CheckBoxFor(model => model.InspectionReport.FinalOgraInspection)
@Html.ValidationMessageFor(model => model.InspectionReport.FinalOgraInspection, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.OmcClientRequirement, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-3">
@Html.CheckBoxFor(model => model.InspectionReport.OmcClientRequirement)
@Html.ValidationMessageFor(model => model.InspectionReport.OmcClientRequirement, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.TankLorryRegistrationNo, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-3">
@Html.EditorFor(model => model.InspectionReport.TankLorryRegistrationNo, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.InspectionReport.TankLorryRegistrationNo, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.TruckTractorManufacturerName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-3">
@Html.EditorFor(model => model.InspectionReport.TruckTractorManufacturerName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.InspectionReport.TruckTractorManufacturerName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.ClientName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-3">
@Html.EditorFor(model => model.InspectionReport.ClientName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.InspectionReport.ClientName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.Capacity, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-3">
@Html.EditorFor(model => model.InspectionReport.Capacity, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.InspectionReport.Capacity, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.Omc, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-3">
@Html.EditorFor(model => model.InspectionReport.Omc, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.InspectionReport.Omc, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.EngineNo, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-3">
@Html.EditorFor(model => model.InspectionReport.EngineNo, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.InspectionReport.EngineNo, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.TankLorryDimension, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-3">
@Html.EditorFor(model => model.InspectionReport.TankLorryDimension, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.InspectionReport.TankLorryDimension, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.ChassisNo, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-3">
@Html.EditorFor(model => model.InspectionReport.ChassisNo, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.InspectionReport.ChassisNo, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.InspectionPlace, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-3">
@Html.EditorFor(model => model.InspectionReport.InspectionPlace, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.InspectionReport.InspectionPlace, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.TankLorryEnginePower, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-3">
@Html.EditorFor(model => model.InspectionReport.TankLorryEnginePower, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.InspectionReport.TankLorryEnginePower, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.CarriageName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-3">
@Html.EditorFor(model => model.InspectionReport.CarriageName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.InspectionReport.CarriageName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.Brakes, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-3">
@Html.EditorFor(model => model.InspectionReport.Brakes, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.InspectionReport.Brakes, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.IsSatisfactory, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-3">
@Html.CheckBoxFor(model => model.InspectionReport.IsSatisfactory)
@Html.ValidationMessageFor(model => model.InspectionReport.IsSatisfactory, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.Remarks, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-3">
@Html.TextAreaFor(model => model.InspectionReport.Remarks, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.InspectionReport.Remarks, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.Description, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-3">
@Html.TextAreaFor(model => model.InspectionReport.Description, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.InspectionReport.Description, "", new { @class = "text-danger" })
</div>
</div>
<label> @ViewBag.Error</label>
<div class="form-group">
<div class="col-md-offset-2 col-md-2">
<button class="btn btn-success btn-outline btn-block" type="submit"><i class="fa fa-save" style="font-size:medium"></i> Add</button>
</div>
<div class="col-md-2">
<button class="btn btn-default btn-block" type="button" onclick="window.location.href='@Url.Action("Index","Certificates")'"><i class="fa fa-remove" style="font-size:medium"></i> Cancel</button>
</div>
</div>
</div>
}
假设你都在.container或.container-fluiddiv中，你应该稍微改变一下。
首先为表单设置大小，然后添加 .rowdiv 包装所需的行，然后使用 col-x 类添加包装所需的单个内容的div。
即：
<div class="form-horizontal col-md-12">
<div class="row">
<div class="form-group col-md-3">
@Html.LabelFor(model => model.InspectionReport.VelosiProjectNo, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.TextBoxFor(model => model.InspectionReport.VelosiProjectNo, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.InspectionReport.VelosiProjectNo, "", new { @class = "text-danger" })
</div>
<div class="form-group col-md-3">
@Html.LabelFor(model => model.InspectionReport.VelosiProjectNo, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.TextBoxFor(model => model.InspectionReport.VelosiProjectNo, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.InspectionReport.VelosiProjectNo, "", new { @class = "text-danger" })
</div>
</div>