Masalah penambahan dinamik dengan kekurangan ruang antara elemen

Question

Saya mempunyai templat berikut dalam penanda saya.

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

Kemudian saya masukkan ke dalam DOM saya seperti ini.

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

Kaedah ini berfungsi, tetapi tiada ruang antara butang yang dimasukkan. Saya juga cuba menambah ruang sebelum $clone tetapi tidak memberi kesan. Saya juga cuba menambah ruang pada templat tetapi itu tidak berfungsi sama ada.

Beberapa butang telah ditambahkan pada mulanya. Ia adalah satu setiap baris, dengan ruang ditunjukkan di antara butang. Tetapi bagaimana untuk menunjukkan ruang antara butang yang dimasukkan menggunakan JavaScript?

Answer 1

Gunakan flexbox untuk meruntuhkan semua ruang putih dan menambah jurang.

#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>