1
我設計了我的表單控件，使用引導程序並對我的設計有問題。 我已將屏幕分成三列，每列4 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>
抱歉沒有找到你。我已經給出了2的列寬，因爲我創建了一個8列的父列以跨越兩個列部分。正如我在之前的帖子中所提到的那樣，我已將這一列分爲三列，每列4列。因此，我使用col-md 8作爲一般協議。請讓我知道出了什麼問題，並相應地修改它 – Tom
@Tom對不起，我的壞...我應該添加下一行代碼。你添加col-md-10的另一個div。將編輯...此外，不要指望我建議「正確」coed。我不是進入div-itis，而不是設計師......我只是讀寫代碼... –
是的。我添加了col-md 8作爲父母，並將標籤添加爲col-md 2，並將輸入控件添加爲colmd 10。這是填寫col-md 8區域，即10 + 2 = 12。我主要關心的是有空間在通用名稱之上並且不確定如何消除該空間 – Tom