Bootstrap表单组和jquery标签管理器：输入框下方的位置标签？答案

【问题标题】：Bootstrap form groups and jquery tag manager: position tags below the input box?Bootstrap表单组和jquery标签管理器：输入框下方的位置标签？
【发布时间】：2016-10-28 00:02:25
【问题描述】：

我正在使用 Bootstrap 和 jquery tag manager。有没有办法控制标签的填充位置，相对于输入字段？例如，使用下面的代码，标签位于文本框上方。

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tagmanager/3.0.2/tagmanager.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tagmanager/3.0.2/tagmanager.min.js"></script>
</head>

<div class="form">
  <div class="form-group col-xs-6">
    <label>Tags</label>
    <input type="text" name="tags" class="form-control tm-input"/>
  </div>
</div>


<script type="text/javascript">
$(document).ready(function() {
  $('.tm-input').tagsManager();
});
</script>

我不太喜欢当前的设置，因为它改变了文本框的位置（向下移动）。除了在输入框上方填充标签，有什么方法可以在下方填充它们吗？

我正在寻找类似于 Stackoverflow 标签输入字段的内容——标签显示在文本输入字段的下方。

【问题讨论】：

尝试在 css 中给 tags margin-top 与 input 相同的高度
@AnujKhandelwal 不起作用

标签： jquery twitter-bootstrap

【解决方案1】：

我已经编辑了一些代码，然后将其显示在输入下方

html：

<div class="form">
  <div class="form-group col-xs-6">
    <label>Tags</label>
    <input type="text" name="tags" class="form-control tm-input"/>
  </div>
  <div class="col-sm-12 tags-show">

  </div>
</div>

和jQuery：

$(document).ready(function() {
  $('.tm-input').tagsManager({
    tagsContainer: '.tags-show',
  });
});

【讨论】：