Есть ли способ выровнять карты Dynami c по горизонтали, используя ajax?

Question

Я пытаюсь сделать свои карты горизонтально, но проблема в том, что у меня есть ajax, который извлекает мои данные, и это динамически c

Мне просто нужно две карты в каждой строке на моей странице

Вот мой 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

В конечном итоге вам нужно иметь расположение контейнера> row> col в div ( Grid Layout ):

<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 в родительский элемент, т.е. div с .row класс как 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>

Или вы можете дать идентификатор для .row div:

$('#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 с на основе индекса данных:

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>

Answer 2

Я думаю, что у вас в основном хорошо. Вместо обновления html отдельного <div id='showdata'> объедините его с вашей строкой.

 <div class="container">
    <div id='showdata' class="row"></div>
 </div>