元素之间缺乏间隔的动态添加问题

Question

我在我的标记中有以下模板。

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

然后我像这样将它插入到我的DOM中。

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

这个方法是有效的，但是插入的按钮之间没有空格。我什至尝试在$clone之前添加一个空格，但没有效果。我还尝试在模板中添加空格，但也没有效果。

一些按钮是在开始时添加的。它们每行一个，这些按钮之间显示有空格。但是如何在使用JavaScript插入的按钮之间显示空格呢？

Answer 1

使用 flexbox 来折叠所有的空白，并添加间隙。

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