Bootstrap 标记输入不工作

5lhxktic 于 2023-09-28 发布在 Bootstrap

关注(0)|答案(4)|浏览(105)

我刚刚遇到Bootstrap tagsinput，我正在尝试它，但我似乎不能让它工作。
我在布局的顶部添加了以下内容：

<link rel="stylesheet" href="~/Scripts/bootstrap_tagsinput/bootstrap-tagsinput.css">

我在布局的底部添加了以下内容：

<script src="~/Scripts/bootstrap_tagsinput/bootstrap-tagsinput.js"></script>

然后在我的部分页面中添加了以下内容：

<input type="text" value="" data-role="tagsinput" id="tags" class="form-control">

下面是正在发生的事情的图像，而不是显示的标签：

据我所知，这应该行得通。我错过了什么？

twitter-bootstrap

来源：https://stackoverflow.com/questions/40379163/bootstrap-tagsinput-not-working

4条答案

按热度按时间

7vhp5slm1#

我 * 认为 * 因为它是一个局部视图，并且它在库加载后出现，所以它没有被应用。
我也有同样的问题。我的索引页面包含了所有的库，但部分视图从未使用过它们。
我不得不把这个加到局部视图剃刀上，迫使它在加载后应用。

<script>
    $(function () {
        $('input[data-role=tagsinput]').tagsinput();
    }
    );
</script>

赞(0）回复(0）举报 2023-09-28

k3fezbri2#

在您的页面中添加此链接

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

演示
Bootstrap - tagsinput，Github - Reference

赞(0）回复(0）举报 2023-09-28

ebdffaop3#

你是否初始化了你的输入，

$('input').tagsinput({
  typeaheadjs: {
    name: 'citynames',
    displayKey: 'name',
    valueKey: 'name',
    source: citynames.ttAdapter()
  }
});

赞(0）回复(0）举报 2023-09-28

jw5wzhpr4#

这是因为旧的风格使用引导类“标签label-info”。试着改成“badge badge-info”类

$('.tags').tagsinput({
     tagClass: 'badge badge-info'
 });

赞(0）回复(0）举报 2023-09-28

我来回答

Bootstrap 标记输入不工作

4条答案

相关问题

热门标签

最新问答