Problème d'addition dynamique avec manque d'espace entre les éléments

Question

J'ai le modèle suivant dans mon balisage.

<template id="unsequenced-template">
    <button type="button" class="btn btn-primary railcar"></button>
</template>

Puis je l'insère dans mon DOM comme ça.

// 在指定的目标之前，在无序列表中插入一个铁路车辆
function addSequenced(railcar, $target) {
    var $clone = $($('#unsequenced-template').html());
    $clone.attr('data-id', railcar.id);
    $clone.text(railcar.number);
    $clone.insertBefore($target);
    modified = true;
}

Cette méthode fonctionne, mais il n'y a pas d'espace entre les boutons insérés. J'ai même essayé d'ajouter un espace avant le $clone mais je n'ai eu aucun effet. J'ai également essayé d'ajouter des espaces au modèle mais cela n'a pas fonctionné non plus.

Certains boutons ont été ajoutés au début. Il y en a un par ligne, avec des espaces entre les boutons. Mais comment afficher l'espace entre les boutons insérés à l'aide de JavaScript ?

Answer 1

Utilisez flexbox pour réduire tous les espaces et ajouter des espaces.

#btn-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em;
}

function addSequenced(railcar, $target) {
    var $clone = $($('#unsequenced-template').html());
    $clone.attr('data-id', railcar.id);
    $clone.text(railcar.number);
    $clone.insertBefore($target);
    modified = true;
}

let num = 4;
$("#add-btn").on("click", function(e) {
  addSequenced({
    id: num,
    number: num,
  }, $(this));
  num++;
});

#btn-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<template id="unsequenced-template">
    <button type="button" class="btn btn-primary railcar"></button>
</template>
<div id="btn-container">
  <button type="button" class="btn btn-primary railcar">1</button>
  <button type="button" class="btn btn-primary railcar">2</button>
  <button type="button" class="btn btn-primary railcar">3</button>
  <button id="add-btn" type="button" class="btn btn-secondary">Add</button>
</div>