EditorFor & DisplayNameFor inside dl-horizental will be too close to each other

问题

i have the following code inside my asp.net mvc Razor view, and i am using Bootstrap 3:-

<dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.Name)
        </dt>

        <dd>
            @Html.EditorFor(model => model.Name,new { htmlAttributes = new { @class = "form-control", disabled = "disabled" } })
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Description)
        </dt>

        <dd>
            @Html.TextAreaFor(model => model.Description,new { @class = "form-control", disabled = "disabled" } )
        </dd>

The result is that all the editorfor will be too close to each other as follow:-

so can anyone adivce how to add some vertical space between items?

回答1:

Wrap your inputs in form-group divs that will give them a little bit of margin at the bottom.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<dl class="dl-horizontal">
  <dt>DD1</dt>
    <dd><div class="form-group"><input type="text" class="form-control" /></div></dd>
  <dt>DD2</dt>
  <dd><div class="form-group"><input type="text" class="form-control" /></div></dd>
  <dt>DD3</dt>
  <dd><div class="form-group"><input type="text" class="form-control" /></div></dd>
</dl>

来源：https://stackoverflow.com/questions/28246693/editorfor-displaynamefor-inside-dl-horizental-will-be-too-close-to-each-other