我已经设计了这种形式，但是问题是我希望每个三个控件都排成一行，但是在我的代码中，每个控件都排成一行。为什么？
我放置了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>
}
答案 0 :(得分：0)
假设所有内容都位于.container或.container-fluid div中，则应对此进行一些更改。
首先为表单设置一个大小，然后添加.row divs包裹所需的行，然后divs使用col-x类包装所需的单个内容。
即：
<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>