如何在一行中创建 3 个输入？

Question

在我的代码中，我希望每行只有三个输入字段。但是，当我尝试创建第四个输入字段时，第一个输入字段保留在上一行，而其他三个输入字段移动到下一行。此后，代码可以正常工作。该问题仅出现在第一个输入字段中。

let addButton = document.querySelector('.btn-group[aria-label="add-new-input"] button');
let deleteButton = document.querySelector('.btn-group[aria-label="delete-input"] button');
let buttonContainer = document.getElementById('button-container');

buttonContainer.style.display = 'flex';
buttonContainer.style.flexWrap = 'wrap';

let inputCounter = 1;
let rowCounter = 1;

addButton.addEventListener('click', function() {
  if (inputCounter % 3 === 1) {
    let newRow = document.createElement('div');
    newRow.style.display = 'flex';
    newRow.id = 'row-' + rowCounter;
    buttonContainer.appendChild(newRow);
  }

  let newDiv = document.createElement('div');
  newDiv.className = 'input-group';
  newDiv.style.marginRight = '10px';

  let newInput = document.createElement('input');
  newInput.type = 'text';
  newInput.className = 'form-control';
  newInput.name = 'blocks' + inputCounter;
  newInput.placeholder = 'Blokları qeyd edin';
  newInput.ariaLabel = 'Input group example';
  newInput.ariaDescribedby = 'btnGroupAddon';

  newDiv.appendChild(newInput);

  let newAddButton = addButton.cloneNode(true);
  newAddButton.addEventListener('click', function() {
    addButton.click();
  });

  let newDeleteButton = deleteButton.cloneNode(true);
  newDeleteButton.addEventListener('click', function() {
    newDiv.parentNode.removeChild(newDiv);
    if (document.getElementById('row-' + rowCounter).childElementCount === 0) {
      document.getElementById('row-' + rowCounter).remove();
      rowCounter--;
    }
  });

  newDiv.appendChild(newAddButton);
  newDiv.appendChild(newDeleteButton);
  document.getElementById('row-' + rowCounter).appendChild(newDiv);

  if (inputCounter % 3 === 0) {
    rowCounter++;
  }
  inputCounter++;
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="input-group">
    <input type="text" class="form-control" name="blocks" placeholder="Mark the blocks" aria-label="Input group example" aria-describedby="btnGroupAddon">
  </div>

  <div class="btn-group" role="group" aria-label="add-new-input">
    <button type="button" class="btn btn-light"><i class="fa-solid fa-circle-plus"></i></button>
  </div>

  <div class="btn-group" role="group" aria-label="delete-input">
    <button type="button" class="btn btn-light"><i class="fa-solid fa-trash-can fa-sm"></i></button>
  </div>

  <div id="button-container"></div>
</div>

Answer 1

您需要限制每行可容纳的容器数量：

#button-container {
    display: flex;
    flex-direction: column;
}

#button-container > div {
    display: flex;
    flex-wrap: wrap;
}

.input-group {
    margin-right: 10px;
    flex-basis: calc(33.33% - 10px); /* Adjust width to fit 3 per line */
}

let addButton = document.querySelector('.btn-group[aria-label="add-new-input"] button');
let deleteButton = document.querySelector('.btn-group[aria-label="delete-input"] button');
let buttonContainer = document.getElementById('button-container');


let inputCounter = 1;
let rowCounter = 1;

addButton.addEventListener('click', function() {
  if (inputCounter % 3 === 1) {
    let newRow = document.createElement('div');
    newRow.style.display = 'flex';
    newRow.id = 'row-' + rowCounter;
    buttonContainer.appendChild(newRow);
  }

  let newDiv = document.createElement('div');
  newDiv.className = 'input-group';
  newDiv.style.marginRight = '10px';

  let newInput = document.createElement('input');
  newInput.type = 'text';
  newInput.className = 'form-control';
  newInput.name = 'blocks' + inputCounter;
  newInput.placeholder = 'Blokları qeyd edin';
  newInput.ariaLabel = 'Input group example';
  newInput.ariaDescribedby = 'btnGroupAddon';

  newDiv.appendChild(newInput);

  let newAddButton = addButton.cloneNode(true);
  newAddButton.addEventListener('click', function() {
    addButton.click();
  });

  let newDeleteButton = deleteButton.cloneNode(true);
  newDeleteButton.addEventListener('click', function() {
    newDiv.parentNode.removeChild(newDiv);
    if (document.getElementById('row-' + rowCounter).childElementCount === 0) {
      document.getElementById('row-' + rowCounter).remove();
      rowCounter--;
    }
  });

  newDiv.appendChild(newAddButton);
  newDiv.appendChild(newDeleteButton);
  document.getElementById('row-' + rowCounter).appendChild(newDiv);

  if (inputCounter % 3 === 0) {
    rowCounter++;
  }
  inputCounter++;
});

#button-container {
    display: flex;
    flex-direction: column;
}

#button-container > div {
    display: flex;
    flex-wrap: wrap;
}

.input-group {
    margin-right: 10px;
    flex-basis: calc(33.33% - 10px); /* Adjust width to fit 3 per line */
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="input-group">
    <input type="text" class="form-control" name="blocks" placeholder="Mark the blocks" aria-label="Input group example" aria-describedby="btnGroupAddon">
  </div>

  <div class="btn-group" role="group" aria-label="add-new-input">
    <button type="button" class="btn btn-light"><i class="fa-solid fa-circle-plus"></i></button>
  </div>

  <div class="btn-group" role="group" aria-label="delete-input">
    <button type="button" class="btn btn-light"><i class="fa-solid fa-trash-can fa-sm"></i></button>
  </div>

  <div id="button-container"></div>
</div>