EditorFor＆安培; DisplayNameFor内消旋horizental将太靠近彼此 [英] EditorFor & DisplayNameFor inside dl-horizental will be too close to each other

问题描述

我有我的asp.net的MVC的Razor视图里面以下code和我使用引导3： -

 ＆LT; D​​L类=DL-水平＆GT;
        ＆LT; D​​T＆GT;
            @ Html.DisplayNameFor（型号=＆GT; model.Name）
        ＆LT; / DT＆GT;        ＆LT; D​​D＆GT;
            @ Html.EditorFor（型号=＆GT; model.Name，新{htmlAttributes = {新@class =表格控，禁用=禁用}}）
        ＆LT; / DD＆GT;        ＆LT; D​​T＆GT;
            @ Html.DisplayNameFor（型号=＆GT; model.Description）
        ＆LT; / DT＆GT;        ＆LT; D​​D＆GT;
            @ Html.TextAreaFor（型号=＆GT; model.Description，新{@class =表格控，禁用=禁用}）
        ＆LT; / DD＆GT;
 

其结果是，所有的editorfor将太靠近彼此如下： -

所以任何人都可以书于如何增加项目之间有一些垂直空间？

解决方案

环绕你的投入在表单组 div的，这将使他们的保证金有点底部

\r

\r

＆LT;链接HREF =htt​​ps://maxcdn.bootstrapcdn.com/bootstrap /3.3.2/css/bootstrap.min.css的rel =stylesheet属性/＆GT;\r
＆所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =htt​​ps://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js＆GT;＆下; /脚本＆GT;\r
\r
＆LT; D​​L类=DL-水平＆GT;\r
  ＆LT; D​​T＆GT;＆DD1 LT; / DT＆GT;\r
    ＆LT; D​​D＆GT;＆LT; D​​IV CLASS =表单组＆GT;＆LT;输入类型=文本级=表格控/＆GT;＆LT; / DIV＆GT;＆LT; / DD＆GT;\r
  ＆LT; D​​T＆GT;＆DD2 LT; / DT＆GT;\r
  ＆LT; D​​D＆GT;＆LT; D​​IV CLASS =表单组＆GT;＆LT;输入类型=文本级=表格控/＆GT;＆LT; / DIV＆GT;＆LT; / DD＆GT;\r
  ＆LT; D​​T＆GT; DD3＆LT; / DT＆GT;\r
  ＆LT; D​​D＆GT;＆LT; D​​IV CLASS =表单组＆GT;＆LT;输入类型=文本级=表格控/＆GT;＆LT; / DIV＆GT;＆LT; / DD＆GT;\r
＆LT; / DL＆GT;

\r

\r

\r

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?

解决方案

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>

这篇关于EditorFor＆安培; DisplayNameFor内消旋horizental将太靠近彼此的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！