有没有办法使用ajax水平对齐动态卡？

Question

我试图使我的卡片水平，但问题是我有一个 ajax 来获取我的数据并且它是动态的

我的页面中每行只需要两张卡片

这是我的ajax脚本代码

for(i=0; i<data.length; i++){

    html +='<div class="col-md-6">'+

        '<div class="card" style="width: 15rem; text-align:center;display:inline-block;">'+

            '<div class="card-body">'+

                '<h5 class="card-title">'+data[i].group_name+'</h5>'+

                        '<h6 class="card-subtitle mb-2 text-muted">Modify your Group</h6>'+

                            '<a href="javascript:;" class="btn btn-info item-edit" data="'+data[i].id+'"><span class="iconify" data-icon="feather:edit" data-inline="false"></span></a>&nbsp;'+

                            '<a href="javascript:;" class="btn btn-primary item-delete" data="'+data[i].id+'"><span class="iconify" data-icon="dashicons:remove" data-inline="false"></span></a>'+

            '</div>'+

     '</div>'+

    '</div><hr>';

    }

$('#showdata').html(html);

并在html中

 <div class="container">

        <div class="row">

            <div id="showdata"></div>

        </div>

    </div>

Answer 1

我认为你所拥有的大部分都很好。而不是更新单独的 html，<div id='showdata'>将其与您的行结合起来。&nbsp;<div&nbsp;class="container"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id='showdata'&nbsp;class="row"></div> &nbsp;</div>

Answer 2

您最终需要有 div 的容器 > 行 > 列排列（网格布局）：<div class="container">  <div class="row">    <div class="col-md-6">      One of two columns    </div>    <div class="col-md-6">      One of two columns    </div></div>您可以将 html 写入带有.row类的父 ie div 中，因为div#showdata没有.row类：$('#showdata').parent().html(html);const data = [{  group_name: 'group 1',  id: 1}, {  group_name: 'group 2',  id: 2}];let html = '';for (i = 0; i < data.length; i++) {  html += '<div class="col-md-6">' +    '<div class="card" style="width: 15rem; text-align:center;display:inline-block;">' +    '<div class="card-body">' +    '<h5 class="card-title">' + data[i].group_name + '</h5>' +    '<h6 class="card-subtitle mb-2 text-muted">Modify your Group</h6>' +    '<a href="javascript:;" class="btn btn-info item-edit" data="' + data[i].id + '"><span class="iconify" data-icon="feather:edit" data-inline="false"></span></a>&nbsp;' +    '<a href="javascript:;" class="btn btn-primary item-delete" data="' + data[i].id + '"><span class="iconify" data-icon="dashicons:remove" data-inline="false"></span></a>' +    '</div>' +    '</div>' +    '</div><hr>';}$('#showdata').parent().html(html);<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="container">  <div class="row">    <div id="showdata"></div>  </div></div>或者你可以将 id 赋予.rowdiv：$('#showdata').html(html);<div class="container">   <div id="showdata" class="row">   </div></div>const data = [{  group_name: 'group 1',  id: 1}, {  group_name: 'group 2',  id: 2}];let html = '';for (i = 0; i < data.length; i++) {  html += '<div class="col-md-6">' +    '<div class="card" style="width: 15rem; text-align:center;display:inline-block;">' +    '<div class="card-body">' +    '<h5 class="card-title">' + data[i].group_name + '</h5>' +    '<h6 class="card-subtitle mb-2 text-muted">Modify your Group</h6>' +    '<a href="javascript:;" class="btn btn-info item-edit" data="' + data[i].id + '"><span class="iconify" data-icon="feather:edit" data-inline="false"></span></a>&nbsp;' +    '<a href="javascript:;" class="btn btn-primary item-delete" data="' + data[i].id + '"><span class="iconify" data-icon="dashicons:remove" data-inline="false"></span></a>' +    '</div>' +    '</div>' +    '</div><hr>';}$('#showdata').html(html);<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="container">  <div id="showdata" class="row">  </div></div>奖励：您可以.row div根据数据索引打开和关闭 s：const data = [{  group_name: 'group 1',  id: 1}, {  group_name: 'group 2',  id: 2}, {  group_name: 'group 3',  id: 3}, {  group_name: 'group 4',  id: 4}, {  group_name: 'group 5',  id: 5}];let html = '';for (i = 0; i < data.length; i++) {  if (i % 2 == 0) {    html += '<div class="row">';  }  html += '<div class="col-md-6">' +    '<div class="card" style="width: 15rem; text-align:center;display:inline-block;">' +    '<div class="card-body">' +    '<h5 class="card-title">' + data[i].group_name + '</h5>' +    '<h6 class="card-subtitle mb-2 text-muted">Modify your Group</h6>' +    '<a href="javascript:;" class="btn btn-info item-edit" data="' + data[i].id + '"><span class="iconify" data-icon="feather:edit" data-inline="false"></span></a>&nbsp;' +    '<a href="javascript:;" class="btn btn-primary item-delete" data="' + data[i].id + '"><span class="iconify" data-icon="dashicons:remove" data-inline="false"></span></a>' +    '</div>' +    '</div>' +    '</div>';  if (i % 2 == 1) {    html += '</div>';  }}$('#showdata').html(html);<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="showdata" class="container"></div>