Как настроить дизайн так, чтобы каждые 3 элемента управления отображались в одной строке с надписями над каждым элементом управления?

Question

Я пытаюсь расположить форму так, чтобы каждые 3 элемента управления отображались в одной строке с надписью над ней.

Я пробовал это, но это происходит вертикально. Я новичок в проектировании.

@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, но ничего не работает. Я думаю, что я делаю это неправильно.

Answer 1

используйте код ниже:

 <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>