Question

我努力让自举标签输入正常工作，但我无法看到我可能做错了什么。据我所知，我甚至按照这篇文章How to use Bootstrap Tags Input plugin

中的步骤进行了操作

＆＃13;

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

＆＃13;

我看到两件奇怪的事情：

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

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

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

Answer 1

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

因为看起来他们在3.3.7之后删除了对 Bootstrap标签输入插件的支持

以下代码段可以正常使用：

＆＃13;

.bootstrap-tagsinput {
     width: 100%;
}

＆＃13;

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

＆＃13;

当我删除时：

<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%宽度，则必须使用自定义样式。

希望这有用。

Answer 2

在这里观察： 未加载Bootstrap CSS

1）测试中的Bootstrap 4.X。

2）完整性属性阻止加载bootstrap CSS

我已使用稳定版本的bootstrap

更新了代码

＆＃13;

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

＆＃13;

Answer 3

您可以在标签输入中设置数据，如下所示：

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

然后：

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

Bootstrap标签输入不显示标签

3 个答案: