ingrese la descripción de la imagen aquí
no hay espacio entre las tarjetas. ¿Cómo agregar un poco de espacio entre ellos?
.done((todos) => { todos.forEach(el => { console.log(el) $("#todo-list").append(` <div class="card col-6 col-sm-4" id="todo-${el.id}" style="width: 18rem; flex-wrap: wrap;"> <div class="card-body"> <h4 class="todo-title">${el.title}</h4> <h6>${el.description}</h6> <p>Due Date: ${el.due_date}</p> <input type="checkbox" id="checkbox" onclick="updateStatus(${el.id})"> Status</input> <a type="button" class="mw-100 btn-close col position-absolute top-0 end-0" aria-label="Close" id="btn-delete-todo" onclick="deleteTodo(${el.id})"></a> </div> </div> `) })Puede usar margen, con el atributo de estilo o con una clase de arranque.
Usando el atributo de estilo: style="margin: 1rem;" ,
.done((todos) => { todos.forEach(el => { console.log(el) $("#todo-list").append(` <div class="card col-6 col-sm-4" id="todo-${el.id}" style="width: 18rem; margin: 1rem; flex-wrap: wrap;"> <div class="card-body"> <h4 class="todo-title">${el.title}</h4> <h6>${el.description}</h6> <p>Due Date: ${el.due_date}</p> <input type="checkbox" id="checkbox" onclick="updateStatus(${el.id})"> Status</input> <a type="button" class="mw-100 btn-close col position-absolute top-0 end-0" aria-label="Close" id="btn-delete-todo" onclick="deleteTodo(${el.id})"></a> </div> </div> `) }) Usando la clase de arranque: class="m-4" ,
.done((todos) => { todos.forEach(el => { console.log(el) $("#todo-list").append(` <div class="card col-6 col-sm-4 m-4" id="todo-${el.id}" style="width: 18rem; flex-wrap: wrap;"> <div class="card-body"> <h4 class="todo-title">${el.title}</h4> <h6>${el.description}</h6> <p>Due Date: ${el.due_date}</p> <input type="checkbox" id="checkbox" onclick="updateStatus(${el.id})"> Status</input> <a type="button" class="mw-100 btn-close col position-absolute top-0 end-0" aria-label="Close" id="btn-delete-todo" onclick="deleteTodo(${el.id})"></a> </div> </div> `) })Puede intentar agregar esta línea de código donde declara el estilo de la tarjeta en donde append la tarjeta a su #todo-list .
Sería algo como esto:
<div class="card col-6 col-sm-4" id="todo-${el.id}" style="width: 18rem;margin-right: .5rem; flex-wrap: wrap;"> Alternativamente, puede establecer un margin-right o margin-left con el valor que realmente necesita para su card de clase. Además, incluso podría usar las clases predeterminadas para los márgenes si tiene Bootstrap 3. Para dispositivos pequeños, medianos y grandes, digamos que puede hacer esto:
<div class="card col-6 col-sm-4 mr-1 mr-sm-2 mr-md-2 mr-lg-1" id="todo-${el.id}" style="width: 18rem; flex-wrap: wrap;">Espero que mi información sobre el asunto te pueda ayudar.