我试图以一种方式排列我的表单,每个控件出现在一行中,标签位于其上方。
我尝试了这个,但它是垂直的。我是设计新手。
@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 = "Before", Value = "0"},
new SelectListItem { Text = "During", Value = "1"},
new SelectListItem { Text = "Final", Value = "2"}
}, "-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.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.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>
}
有什么方法可以实现吗?我尽力了,但似乎没有整理好。我使用bootstrap 3和CSS与HTML,但没有任何作用。我想我做错了。
使用以下代码:
<div class="panel-body">
<div class="row margin-0">
<div class="form-group">
<div class="col-md-3 col-sm-3 col-xs-6 standard-padding">
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.VelosiProjectNo, htmlAttributes: new { @class = "label-field" })
@Html.TextBoxFor(model => model.InspectionReport.VelosiProjectNo, new { @class = "form-control"})
@Html.ValidationMessageFor(model => model.InspectionReport.VelosiProjectNo, "", new { @class = "text-danger" })
</div>
</div>
<div class="col-md-3 col-sm-3 col-xs-6 standard-padding">
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.VelosiReportNo, htmlAttributes: new { @class = "label-field" })
@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="col-md-3 col-sm-3 col-xs-6 standard-padding">
<div class="form-group">
@Html.LabelFor(model => model.InspectionReport.Reference, htmlAttributes: new { @class = "label-field" })
@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>
</div>
</div>