DisplayFor showing on different line to LabelFor MVC - css

Question

I created an Edit page in MVC and decided I did not want the ID to be editable, but I do want it to look like the rest, just greyed out preferably.
Here is my property:
<div class="form-group">
#Html.LabelFor(model => model.EvpId, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DisplayFor(model => model.EvpId, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.EvpId, "", new { #class = "text-danger" })
</div>
</div>
After doing some reading everyone seems to suggest using the #Html.DisplayFor which makes sense, even though it does not look like the rest.
However when swapping the EditorFor for the DisplayFor I notice that the label is not on the same line:
What is the simple way of having this on the same line as the corresponding label, I am using the standard out of the box bootstrap CSS.
View Source on page:
<div class="form-group">
<label class="control-label col-md-2" for="EvpId">Id</label>
<div class="col-md-10">
2
<span class="field-validation-valid text-danger" data-valmsg-for="EvpId" data-valmsg-replace="true"></span>
</div>
</div>

Answer 1

I have had the same issue.
Jasen answer did not help, because span does not put an element into the same horizontal line with label, but his later comment with the link to bootstrap doc solved the problem, we should use p tag instead of span.
So my final solution was:
<p class="form-control-static">#Html.DisplayFor(model => model.Contractor.Name) </p>
Thanks to Jasen!

Answer 2

When you use #Html.DisplayFor() the helper is selecting markup based on the type. Here it chose to output a bare string and this breaks the Bootstrap form-horizontal styling.
<div class="col-md-10">
2 <!-- no surrounding tags for EvpId value -->
...
</div>
The easiest thing to do is just use plain html to insert your own tags
<div class="col-md-10">
<span class="form-control-static">#Model.EvpId</span>
...
</div>
If you do this a lot or you have much more markup you can create a custom helper extension. This is a very simple example:
public static class HtmlHelperExtensions
{
public static HtmlString IdSpan(this HtmlHelper helper, string id)
{
return new HtmlString(String.Format("<span class=\"form-control\">{0}</span>", id));
}
}
Usage:
<div class="col-md-10">
#Html.Idspan(Model.EvpId)
#Html.ValidationMessageFor(model => model.EvpId, "", new { #class = "text-danger" })
</div>

Answer 3

Using Jasen's answer I was able to achieve what I wanted by altering the width of the <span> however this seemed abit messy:
<span class="form-control" style="width:280px;">#Model.EvpId</span>
The ultimate answer to my question was this as it is what I originally was looking for:
#Html.EditorFor(model => model.EvpId, new { htmlAttributes = new { #class = "form-control", #readonly = "readonly" } })
Hope this helps someone.

Answer 4

Instead of wrapping in a P tag or SPAN I just put the class directly into the exiting DIV, and that worked too.
<div class="col-md-10 form-control-static">
...
</div>