Question

我使用bootstrap设计了我的表单控件，但我的设计有问题。我将屏幕分为三列，每列4 md。一般协议控制被定义为跨越的col-md 8。不确定为什么总协议领域和销售办公室之间有空间。有人可以帮忙吗？我为.col-md-4，.col-md-8设置了边框供你查看。

CSS

<style>
    .clearfix {
        clear: both;
        padding: 0;
        margin: 0;
        height:10px;
        display: block;
    }

    #ProjectContent, #CalculationSpecials, #GeneralAgreementName {
        width: 100%;
    }

    .col-md-4 ,.col-md-8{
        border: solid 1px;
    }
    .errormessage {
        color: red;
        font-weight: bold;
    }

    /*.col-md-4, col-md-8 {
        border: solid 1px;
    }*/

</style>

查看

<div>
    @Html.AntiForgeryToken()
    @Html.HiddenFor(model => model.CompanyCode)
    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                @Html.LabelFor(model => model.Company, htmlAttributes: new { @class = "control-label col-md-4" })
                <div class="col-md-8">
                    <div class="editor-field">
                        @(Html.Kendo().ComboBoxFor(model => model.CountryCode)
                            .HtmlAttributes(new { style = "width:100%" })
                            .DataTextField("CompanyCodeCompany")
                            .DataValueField("CountryCode")
                            .Filter(FilterType.Contains)
                            .MinLength(3)
                            .Events(e => e.Change("onCompanyChange").DataBound("onCompanyComboChange"))
                            .Value("GB")
                            .DataSource(dataSource => dataSource
                            .Read(read => read.Action("RequestHeader_SalesOrganisation", "Request").Type(HttpVerbs.Post))
                            .ServerFiltering(true)
                            )
                        )
                    </div>
                    @Html.ValidationMessageFor(model => model.Company, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="form-group">
                @Html.LabelFor(model => model.Name1, htmlAttributes: new { @class = "control-label col-md-4" })

                <div class="col-md-8">
                    <div class="editor-field">
                        @(Html.Kendo().ComboBoxFor(model => model.CustomerMasterDataId)
                    //.Filter("contains")
                    .HtmlAttributes(new { style = "width:100%" })
                    .DataTextField("CustomerNumberName")
                    .Placeholder("Select...")
                    //.AutoBind(false)
                    //.Deferred(false)
                    .DataValueField("CustomerMasterDataId")
                    .Filter("contains")
                    .MinLength(3)
                    .DataSource(dataSource => dataSource
                          .Read(read =>
                          {
                              read.Action("RequestHeader_CustomerData", "Request")
                                  .Type(HttpVerbs.Post)
                                  .Data("GetCompanyCodeFilter");
                          }).ServerFiltering(true)
                                    ).CascadeFrom("CountryCode").Filter("contains")

                       .Events(e =>
                       {
                           e.Change("onCustomerComboChange");
                       })
                        )
                    </div>
                    @Html.ValidationMessageFor(model => model.CustomerMasterDataId, "Please enter a valid CustomerName", new { @class = "text-danger" })
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="form-group">
                @Html.LabelFor(model => model.CustomerNumber, htmlAttributes: new { @class = "control-label col-md-4" })
                <div class="col-md-8">
                    <div class="editor-field">
                        @Html.EditorFor(model => model.CustomerNumber, new { htmlAttributes = new {  @class = "form-control", style = "width:100%", @readonly = "readonly" } })

                    </div>
                    @Html.ValidationMessageFor(model => model.CustomerNumber, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="form-group">
                @Html.LabelFor(model => model.CustomerGroup, htmlAttributes: new { @class = "control-label col-md-4" })
                <div class="col-md-8">
                    <div class="editor-field">
                        @Html.EditorFor(model => model.CustomerGroup, new { htmlAttributes = new { @class = "form-control", style = "width:100%", @readonly = "readonly" } })

                    </div>
                    @Html.ValidationMessageFor(model => model.CustomerGroup, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="form-group">
                @Html.LabelFor(model => model.SalesOffice, htmlAttributes: new { @class = "control-label col-md-4" })
                <div class="col-md-8">
                    <div class="editor-field">
                        @(Html.Kendo().ComboBoxFor(model => model.SalesOfficeID)
                            .Filter("contains")
                            .HtmlAttributes(new { style = "width:100%" })
                            .DataTextField("SalesOffice")
                            .Placeholder("Select...")
                            .DataValueField("SalesOfficeID")
                            .AutoBind(false)
                            //.Deferred(false)
                            .DataSource(dataSource => dataSource
                                .Read(read =>
                                {
                                    read.Action("RequestHeader_SalesOffice", "Request")
                                        .Type(HttpVerbs.Post)
                                        .Data("GetSalesOfficeFilter");
                                })
                                )

                        )
                    </div>
                    @Html.ValidationMessageFor(model => model.SalesOfficeID, "Please select a valid Sales Office", new { @class = "text-danger" })
                </div>
            </div>


            </div>

        <div class="col-md-4">
            <div class="form-group">
                @Html.LabelFor(model => model.ProjectName, htmlAttributes: new { @class = "control-label col-md-4" })
                <div class="col-md-8">
                    @Html.EditorFor(model => model.ProjectName, new { htmlAttributes = new { @class = "form-control", style = "width:100%" } })
                    @Html.ValidationMessageFor(model => model.ProjectName, "Please enter a Project Name", new { @class = "text-danger" })
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="form-group">
                @Html.LabelFor(model => model.ProjectContent, htmlAttributes: new { @class = "control-label col-md-4" })
                <div class="col-md-8">
                    @Html.TextAreaFor(model => model.ProjectContent, new { htmlAttributes = new { @class = "form-control", cols = "50" } })
                    @Html.ValidationMessageFor(model => model.ProjectContent, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="form-group">
                @Html.LabelFor(model => model.NameOfResponsiblePerson, htmlAttributes: new { @class = "control-label col-md-5" })
                <div class="col-md-7 col-md-pull-1">
                    @(Html.Kendo().ComboBoxFor(model => model.PersonResponsibleMasterDataId)
                        .Filter("contains")
                        .HtmlAttributes(new { style = "width:100%" })
                        .DataTextField("NameOfResponsiblePerson")
                        .DataValueField("PersonResponsibleMasterDataId")
                        .Placeholder("Select...")
                        // .AutoBind(false)
                        //.Deferred(false)
                        .DataSource(dataSource => dataSource
                        .Read(read =>
                        {
                            read.Action("RequestHeader_PersonResponsibleMasterData", "Request")
                                .Type(HttpVerbs.Post)
                                .Data("GetFilterOption1");
                        }).ServerFiltering(true)
                                    ).CascadeFrom("CountryCode").Filter("contains")

                    )
                    @Html.ValidationMessageFor(model => model.PersonResponsibleMasterDataId, "Please select a valid Service Account Manager", new { @class = "text-danger" })
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="form-group">
                @Html.LabelFor(model => model.Requestor, htmlAttributes: new { @class = "control-label col-md-4" })
                <div class="col-md-8">
                    @Html.EditorFor(model => model.Requestor, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })

                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="form-group">
                @Html.LabelFor(model => model.ContractStartDate, htmlAttributes: new { @class = "control-label col-md-4" })
                <div class="col-md-8">
                    @(Html.Kendo().DatePickerFor(model => model.ContractStartDate)

                          .Name("ContractStartDate")
                           .Min(DateTime.Today)
                           .HtmlAttributes(new { style = "width: 100%" })
                    )
                    @Html.ValidationMessageFor(model => model.ContractStartDate, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="form-group">
                @Html.LabelFor(model => model.ContractDurationInMonths, htmlAttributes: new { @class = "control-label col-md-4" })
                <div class="col-md-8">
                    @Html.EditorFor(model => model.ContractDurationInMonths, new { htmlAttributes = new { @class = "form-control", style = "width:100%" ,@Value = "2" } })
                    @Html.ValidationMessageFor(model => model.ContractDurationInMonths, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="form-group">
                @Html.LabelFor(model => model.Priority, htmlAttributes: new { @class = "control-label col-md-4" })
                <div class="col-md-8">
                    @(Html.Kendo().DatePickerFor(model => model.Priority)
                          .Name("Priority")
                          .Min(DateTime.Today)
                          .HtmlAttributes(new { style = "width: 100%" })
                    )
                    @Html.ValidationMessageFor(model => model.Priority, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="clearfix"></div>

            <div class="form-group">
                @Html.LabelFor(model => model.IsRequiredToSendToCostDesk, htmlAttributes: new { @class = "control-label col-md-4" })
                <div class="col-md-8">
                    @Html.CheckBoxFor(model => model.IsRequiredToSendToCostDesk, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.IsRequiredToSendToCostDesk, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="form-group">
                @Html.LabelFor(model => model.IsDayBusiness, htmlAttributes: new { @class = "control-label col-md-4" })
                <div class="col-md-8">
                    @Html.CheckBoxFor(model => model.IsDayBusiness, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.IsDayBusiness, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="form-group">
                @Html.LabelFor(model => model.RequestID, htmlAttributes: new { @class = "control-label col-md-4" })
                <div class="col-md-8">
                    <div class="editor-field">
                        @Html.EditorFor(model => model.RequestID, new {  htmlAttributes = new { Value = Model.RequestID == 0 ? "" : Model.RequestID.ToString(), @class = "form-control", style = "width:100%", @readonly = "readonly" } })

                    </div>
                    @Html.ValidationMessageFor(model => model.RequestID, "", new { @class = "text-danger" })
                </div>
            </div>

        </div>

            <div class="col-md-8">
                <div class="form-group">
                    @Html.LabelFor(model => model.GeneralAgreementName, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        <div class="editor-field">
                            @*<span id='remainingGeneralAgreementName'></span><br />*@
                            @Html.TextAreaFor(model => model.GeneralAgreementName, new { htmlAttributes = new { @class = "form-control", cols = "50" } })
                        </div>
                        @Html.ValidationMessageFor(model => model.GeneralAgreementName, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                @*<div class="clearfix"></div>*@
                <div class="form-group">
                    <div class="form-group">
                        @Html.LabelFor(model => model.CalculationSpecials, htmlAttributes: new { @class = "control-label col-md-5" })
                        <div class="col-md-12">
                            @*<span id='remainingCalculationSpecials'></span><br />*@
                            @Html.TextAreaFor(model => model.CalculationSpecials, new { htmlAttributes = new { @class = "form-control", cols = "50" } })
                            @Html.ValidationMessageFor(model => model.CalculationSpecials, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </div>
            </div>

        </div>

Answer 1

我相信你的问题在于这一部分：

@Html.LabelFor(model => model.GeneralAgreementName, htmlAttributes: new { @class = "control-label col-md-2" }) 
<div class="col-md-10">

您与列宽不一致。

引导列之间不需要的空间

1 个答案: