I'm experiencing issues with the design of my form controls in Bootstrap. I have divided the screen into three columns, with each column being 4 md wide. The General Agreement control is defined as col-md-8 to span across. I'm unsure why there is space between the General Agreement field and the sales office. Could someone please assist me with this? I have set the border for .col-md-4 and .col-md-8 for better visibility.
https://i.sstatic.net/1mF0U.png
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;
}
</style>
View
<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>
// More HTML code here...
</div>
</div>
</div>