引导标签输入不显示标签答案

【问题标题】：Bootstrap tags input not displaying the tags引导标签输入不显示标签
【发布时间】：2018-03-16 13:00:12
【问题描述】：

我正在努力让引导标记输入正常工作，但我看不出我可能做错了什么。据我所知，我什至遵循了这篇文章中的步骤How to use Bootstrap Tags Input plugin

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

我看到了 2 件奇怪的事情：

1) 标签出现在 DOM 中，但似乎没有应用任何类型的背景，因此它们看起来不可见。但是我在任何地方都看不到需要在文档中指定默认颜色。

2) 控件似乎会在您键入并放入我不理解的标签时自行调整大小，因为它应该具有固定大小。

有谁知道我在这里做错了什么？显然我可以添加一些 CSS hack 来让标签出现，但我的理解是它应该可以解决问题？

【问题讨论】：

我认为这是您遇到的 CSS 问题。为了您的使用，您可以覆盖颜色。 .bootstrap-tagsinput .tag { color: #555; }
@Sachink 我可以，并在我的问题中提到了这一点。但根据我的理解，我不应该这样做？这让我怀疑我是不是做错了什么

标签： javascript html twitter-bootstrap css

【解决方案1】：

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

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

下面的 sn-p 可以正常工作：

.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 默认行为你可以参考这个link 这是他们的文档页面，你可以看到-

.bootstrap-tagsinput {
    width: 100%;
}

上述样式来自app.css，它从那里链接示例路径。这种风格是保持其父宽度的<input>100%。所以如果你想要100% 宽度，你必须使用自定义样式。

希望这对您有所帮助。

【讨论】：

谢谢，这确实很有用。我没有深入研究 CSS——尽管它看起来确实包含 v3 CSS for v4 JS。不知道这是否会导致其他问题....
在Bootstrap Tags Input plugin 的情况下我不这么认为，但在v4 中，CSS 网格完全改变了。所以，在我看来，你最好对Bootstrap Tags Input plugin 使用自定义样式并使用v4 CSS 和V4 js，如果你只需要这个插件，那么这个插件就不需要@987654334 @文件检查我的sn-p。
@Ian 我忘记了另外一件事，只有twitter-bootstrap/3.3.7 使用插件，而不是bootstrap/3.3.7/。我也试过了。
谢谢，我可能会在周末试一试，看看效果如何。感谢最后的帮助和澄清。

【解决方案2】：

这是我的观察： 引导 CSS 未加载

1) 测试版中的 Bootstrap 4.X。

2) 完整性属性阻止加载引导 CSS

我已经用稳定版的 bootstrap 更新了代码

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

【讨论】：

【解决方案3】：

您可以像这样在标签输入中设置数据：

$('#tag-input').tagsinput('add', 'tags data');

然后：

$('#tag-input').tagsinput('refresh');

【讨论】：