有没有办法使用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'>将其与您的行结合起来。

 <div class="container">
    <div id='showdata' class="row"></div>
 </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>