EditorFor＆amp;显示名称在dl-horizental里面会彼此太靠近

Question

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