css - dl-horizental 中的 EditorFor 和 DisplayNameFor 将彼此靠得太近

Question

我的 asp.net mvc Razor View 中有以下代码，并且我使用的是 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>

结果是所有编辑器将彼此太接近，如下所示:-


那么任何人都可以建议如何在元素之间添加一些垂直空间吗？

Answer 1

将您的输入包装在 form-group 中div 将在底部为它们提供一点边距。

<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>