【发布时间】：2017-10-23 13:04:02
【问题描述】：
我使用引导程序设计了我的表单控件，但我的设计存在问题。 我将屏幕分成三列，每列 4 md。 General 协议控件定义为 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>
【问题讨论】：
标签： asp.net-mvc html css twitter-bootstrap-3