如何实现每行3个输入框？解决首个输入框排版异常问题

问题根源 #

初始输入框直接放在.btn-toolbar容器中，与按钮组、button-container同级；而后续新增的输入框都归在button-container的行容器内。.btn-toolbar是Flex容器，当内容宽度超出容器时会自动换行，导致初始输入框和后续输入框的行被拆到不同行，出现排版错乱。

修复方案 #

把初始输入框移到button-container的第一行里，让所有输入框共用同一套布局规则，同时调整计数器初始值匹配已有输入框的数量。

修改后的代码 #

HTML

<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="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 id="row-1" style="display:flex;">
      <div class="input-group" style="margin-right:10px;">
        <input type="text" class="form-control" name="blocks" placeholder="Mark the blocks" aria-label="Input group example" aria-describedby="btnGroupAddon">
      </div>
    </div>
  </div>
</div>

JavaScript

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';

// 初始已有1个输入框，计数器从2开始
let inputCounter = 2;
// 初始已创建row-1，行计数器保持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);
    const currentRow = document.getElementById('row-' + rowCounter);
    if (currentRow && currentRow.childElementCount === 0) {
      currentRow.remove();
      rowCounter--;
    }
  });

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

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

// 给初始输入框添加操作按钮，保持功能一致
const initialInputDiv = document.querySelector('#row-1 .input-group');
const initialAddBtn = addButton.cloneNode(true);
initialAddBtn.addEventListener('click', () => addButton.click());
const initialDeleteBtn = deleteButton.cloneNode(true);
initialDeleteBtn.addEventListener('click', function() {
  initialInputDiv.parentNode.removeChild(initialInputDiv);
  const row1 = document.getElementById('row-1');
  if (row1.childElementCount === 0) {
    row1.remove();
    rowCounter--;
  }
});
initialInputDiv.appendChild(initialAddBtn);
initialInputDiv.appendChild(initialDeleteBtn);

效果说明 #

现在所有输入框都归在button-container的行容器中，每行最多3个输入框的规则会正确生效，添加第4个输入框时会自动新建一行，不会出现初始输入框单独留在上一行的问题。同时初始输入框也拥有了和新增输入框一样的操作按钮，功能保持统一。

内容的提问来源于stack exchange，提问作者learning dev