Bootstrap标签输入不显示标签

Question

我正在努力让bootstrap标签输入工作,但我看不出我做错了什么.据我所知,我甚至按照这篇文章中的步骤如何使用Bootstrap Tags Input插件

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" crossorigin="anonymous">

<form>
  <div class="form-group row">
    <label for="name" class="col-sm-2 col-form-label">Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control col-sm-12" value="" data-role="tagsinput" id="tags">
    </div>
  </div>
</form>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js" crossorigin="anonymous"></script>

我看到两件奇怪的事情:

1)标签出现在DOM中,但似乎没有应用任何类型的背景,因此它们看起来不可见.但我无法看到任何需要在文档中指定默认颜色的提及.

2)控件似乎调整了自己的大小,因为你正在打字并放入我不理解的标签,因为它应该有固定的大小.

有谁知道我在这里做错了什么？显然我可以添加一些CSS黑客来显示标签,但我的理解是它应该只是解决方案？

Answer 1

这实际上就像证明引导程序错误:

因为看起来他们在3.3.7之后删除了对Bootstrap Tags Input插件的支持

下面的代码片段可以正常工作:

.bootstrap-tagsinput {
     width: 100%;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" crossorigin="anonymous">

<form>
  <div class="form-group row">
    <label for="name" class="col-sm-2 col-form-label">Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control col-sm-12" value="" data-role="tagsinput" id="tags">
    </div>
  </div>
</form>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js" crossorigin="anonymous"></script>

当我删除:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

并补充说:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

背景样式开始出现解决您的第一个问题.

第二个实际上是Bootstrap Tags Input plugin默认行为,你可以参考这个链接,这是他们的文档页面,你可以看到 -

.bootstrap-tagsinput {
    width: 100%;
}

上面的样式来自app.css示例路径的链接.这种风格保持<input> 100%其父宽度.因此,如果您想要100%宽度,则必须使用自定义样式.

希望这有用.