Javascript 增加从js函数动态创建的表中行之间的空间

我在一个模式中有一个JS函数，它根据控制器操作返回的数据在网格中创建一个表。它工作得很好，但是我希望两行之间有多一点空间。我尝试过添加，但似乎没有效果

有人能给我一个解决办法吗？下面是模态、MyJS函数和模态标记的图片

模态：

JS功能：

  $("button[name='paramsBtn']").click(function () {
    /* Grabs ID from col selected */
    var $col = $(this).closest('.row').find('.requestId');
    var jobRequestId = $col.data('id');
    var nameType = $col.data('name');

     $.ajax({
        url: '@Url.Action("JobPollerParameters", "Tools")',
         data: { "jobRequestId": jobRequestId, "name" : nameType},
         success: function (results) {

            $modal = $('#paramsModal');
             $modal.modal("show");

             var name = [];
             var value = [];

             var arr = results;  

             //loop through arr created from dictionary to grab key(s) and value(s)
             for (var key in arr) {
                 if (arr.hasOwnProperty(key)) {
                     //name += key;
                     //value += results[key]; 
                     name.push(key);
                     value.push(results[key])

                     //Remove previous rows
                     $("div[name='params']").remove();
                     for (var i in name) {
                         //Adding parameters as rows 
                         $('<div class="col-md-6 text-break" name="params"> ' + name[i] + '</div>'+ '<div class="col-md-6 text-break" name="params">' + value[i] + '</div>').insertAfter($('#modalGridHeader'));
                     }

                 }

             }
        }
    });
});

$（“按钮[name='paramsBtn']）。单击（函数（）{
/*从所选列中获取ID*/
var$col=$（this）.closest（'.row'）.find（'.requestId'）；
var jobRequestId=$col.data（'id'）；
变量nameType=$col.data（'name'）；
$.ajax({
url:'@url.Action（“JobPollerParameters”、“Tools”），
数据：{“jobRequestId”：jobRequestId，“name”：nameType}，
成功：功能（结果）{
$modal=$（“#parasmodal”）；
$modal.modal（“show”）；
变量名称=[]；
var值=[]；
var arr=结果；
//循环通过从字典创建的arr获取键和值
for（arr中的var键）{
if（arr.hasOwnProperty（键））{
//名称+=键；
//值+=结果[键]；
姓名。按键（键）；
value.push（结果[键]）
//删除以前的行
$（“div[name='params']）；
for（名称为var i）{
//将参数添加为行
$（''+name[i]+''+''+value[i]+''）.insertAfter（$（'#modalGridHeader'）；
}
}
}
}
});
});

模态的标记：

    <div class="modal fade" id="paramsModal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header modal-header-primary" style="margin-bottom:-16px;">
                        <a class="btn btn-xs btn-primary pull-right" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove"></span></a>
                        <h4 class="modal-title" id="modalTitleText">Job Parameters</h4>
                    </div>
                    <div class="modal-body" style="height:250px;">
                        <div class="list-group">
                            <div class="row list-group-item list-group-item-heading container divTableHeading" style="width:inherit; margin-bottom:0px;" id="modalGridHeader">
                                <div class="col-md-6 font-weight-bold"> Parameter(s): </div>
                                <div class="col-md-6 font-weight-bold"> Value(s): </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

作业参数
参数：
价值：
关

添加行的行是：

 $('<div class="col-md-6 text-break" name="params"> ' + name[i] + '</div>'+ '<div class="col-md-6 text-break" name="params">' + value[i] + '</div>').insertAfter($('#modalGridHeader'));

$（''+name[i]+''++''+value[i]+''）。插入（$（'#modalGridHeader'）；

这里是我尝试添加的地方。我也尝试过在底部加上5倍的保证金，但看起来很奇怪

谢谢

又快又脏

---

在

中添加

style=“height:20px；”

为什么不改用表格？给它一个引导类？您还可以尝试为每对动态

col-md-6

元素添加父级

div

，并向父级提供

row

类。向div添加“height”有什么问题？@GuruprasadRao这不是一个选项。有人告诉我不要这么做。。为每对动态

col-md-6

元素添加一个父

div

，并为父元素提供

行

类如何？您希望您的UI看起来更好。因此，最好是将css类放在div中，然后用高度设置样式。