如何将bootstrap-tagsinput的文本输入框移至标签上方？

嘿，这个需求其实很好实现，我给你两种实用方案，优先推荐纯CSS的，简单易维护，不用折腾插件逻辑：

方案一：纯CSS调整布局（最推荐） #

bootstrap-tagsinput的容器默认是.bootstrap-tagsinput，里面装着标签（span.tag）和输入框（input）。我们用Flex布局就能轻松改变它们的排列顺序：

如果想要垂直布局（输入框在顶部，标签在下方依次排列），用这段CSS：

.bootstrap-tagsinput {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 可选，让内容左对齐 */
}

/* 可选：让输入框占满容器宽度 */
.bootstrap-tagsinput input {
  width: 100% !important;
}

要是你想要水平布局（输入框在前面，标签紧跟在输入框右侧排列），就用这段：

.bootstrap-tagsinput {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* 标签和输入框之间的间距，可选 */
}

/* 把输入框排在最前面 */
.bootstrap-tagsinput input {
  order: -1;
}

这样设置后，新添加的标签会自动出现在输入框的下方（垂直布局）或右侧（水平布局），完全符合你要的“标签添加在输入框之后”的效果。

方案二：通过JS调整标签插入位置（适合特殊场景） #

如果CSS布局满足不了你的特殊需求，比如要更精准控制标签的插入时机，那可以监听插件的itemAdded事件，调整标签的位置：

// 先初始化tagsinput
$('input').tagsinput({
  // 你的配置项，比如itemValue、itemText等
});

// 监听标签添加事件，调整新标签的位置
$('input').on('itemAdded', function(event) {
  const $container = $(this).closest('.bootstrap-tagsinput');
  const $newTag = $container.find('.tag:last'); // 获取刚添加的标签
  const $input = $container.find('input');
  $newTag.insertAfter($input); // 把新标签移到输入框后面
});

不过这种方法需要注意插件的默认行为，可能会有小冲突，所以优先用CSS方案哦。

内容的提问来源于stack exchange，提问作者Andrew Uebelein