Dynamisches Additionsproblem mit Platzmangel zwischen Elementen

Question

Ich habe die folgende Vorlage in meinem Markup.

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

Dann füge ich es so in mein DOM ein.

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

Diese Methode funktioniert, aber zwischen den eingefügten Schaltflächen ist kein Leerzeichen. Ich habe sogar versucht, vor dem $clone ein Leerzeichen einzufügen, hatte aber keine Wirkung. Ich habe auch versucht, der Vorlage Leerzeichen hinzuzufügen, aber das hat auch nicht funktioniert.

Einige Schaltflächen wurden am Anfang hinzugefügt. Es gibt eine pro Zeile, wobei zwischen den Schaltflächen Leerzeichen angezeigt werden. Aber wie zeigt man den Abstand zwischen mit JavaScript eingefügten Schaltflächen an?

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>