Bootstrap标签输入不显示标签 [英] Bootstrap tags input not displaying the tags
问题描述
我正在努力让bootstrap标签输入工作，但我看不出我做错了什么。据我所知，我甚至按照这篇文章中的步骤如何使用Bootstrap标签输入插件
< link rel = stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.cssintegrity =sha384-Zug + QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl + M6BdEfwnCJZtKxi1KgxUyJq13dycrossorigin =anonymous> ;< link rel =stylesheethref =https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css\"rossorigin =anonymous>< form> ; < div class =form-group row> < label for =nameclass =col-sm-2 col-form-label>名称< / label> < div class =col-sm-10> < input type =textclass =form-control col-sm-12value =data-role =tagsinputid =tags> < / DIV> < / div>< / form>< script src =https://code.jquery.com/jquery-2.2.4.min.jsintegrity =sha256-BbhdlvQf / xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44 =crossorigin =anonymous >< / script>< script src =https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.jsintegrity =sha384-a5N7Y / aK3qNeh15eJKGWxsqtnX / wWdSZSKp + 81YjTmS15nvnvxKHuzaWwXHDli + 4crossorigin =anonymous>< / script>< script src =https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput .min.jscrossorigin =anonymous>< / script>
我看到两件奇怪的事情：
1）标签出现在DOM但似乎没有应用任何背景，因此它们看起来不可见。但我无法看到任何提及需要在文档中指定默认颜色。
2）控件似乎调整了它的大小自我，因为你正在打字和放入我不理解的标签，因为它应该有一个固定的大小。
有谁知道我在做错了什么？显然我可以添加一些CSS黑客来显示标签，但我的理解是它应该只是解决方案？
这实际上就像证明引导程序错误一样：
因为看起来他们已经删除了对 Bootstrap Tags Input插件的支持 3.3.7之后
下面的代码段可以正常工作：
.bootstrap-tagsinput {width：100％;}
< link rel =stylesheethref =https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap /3.3.7/css/bootstrap.min.css\"><link rel =stylesheethref =https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstra p-tagsinput.csscrossorigin =anonymous>< form> < div class =form-group row> < label for =nameclass =col-sm-2 col-form-label>名称< / label> < div class =col-sm-10> < input type =textclass =form-control col-sm-12value =data-role =tagsinputid =tags> < / DIV> < / div>< / form>< script src =https://code.jquery.com/jquery-2.2.4.min.jsintegrity =sha256-BbhdlvQf / xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44 =crossorigin =anonymous >< / script>< script src =https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js\"rossorigin =anonymous> ;< / script>
当我删除时：
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta。 3 / css / bootstrap.min.cssintegrity =sha384-Zug + QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl + M6BdEfwnCJZtKxi1KgxUyJq13dycrossorigin =anonymous>
并添加：
< link rel =stylesheethref =https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css>
开始出现背景样式以解决第一个问题。
第二个实际上是 Bootstrap Tags输入插件默认行为你可以参考这个链接这是他们的文档页面，你可以看到 -
.bootstrap-tagsinput {
width：100％;
}
上述风格来自 app.css 从那里链接示例路径。此样式保持其父宽度的< input> 100％。因此，如果您想要 100％宽度，则必须使用自定义样式。
希望这有用。
I'm struggling to get bootstrap tag inputs working, but I can't see what I could be doing wrong. As far as I can tell I've even followed the steps in this post 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>
I'm seeing 2 things that are strange:
1) The tags appear in the DOM but don't seem to have any sort of background applied so they appear invisible. But I can't see anywhere any mention of needing to specify a default color in the docs.
2) The control seems to resize it self as you're typing and putting in tags which I don't understand as it's supposed to have a fixed size.
Does anyone know what I'm doing wrong here? Obviously I could add some CSS hacks to get the tags appearing, but my understanding was that it should just work out the box?
This is actually like proving the bootstrap wrong:
Because it looks like they have removed the support for Bootstrap Tags Input plugin after 3.3.7
The below snippet will work just fine:
.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>
when I removed :
<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">
and added :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
The background style started to appear solving your first problem.
The second is actually Bootstrap Tags Input plugin default behaviour you can refer to this link which is their documentation page, in that you can see -
.bootstrap-tagsinput {
width: 100%;
}
The above style comes from app.css which links from there example paths. This style is what keeps the <input> 100% of its parent width. So if you want 100% width you have to use custom style.
Hope this was helpful.
这篇关于Bootstrap标签输入不显示标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
