Bootstrap 標簽輸入不顯示標簽

Question

我正在努力使引導標簽輸入正常工作，但我看不出我可能做錯了什么。 據我所知，我什至按照這篇文章中的步驟如何使用 Bootstrap 標簽輸入插件

 <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%寬度，你必須使用自定義樣式。

希望這是有幫助的。

Answer 2

這是我的觀察： Bootstrap CSS 未加載

1) 測試版中的 Bootstrap 4.X。

2) 完整性屬性阻止加載引導 CSS

我已經用穩定版本的引導程序更新了代碼

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

Answer 3

您可以在標簽輸入中設置數據，如下所示：

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

然后：

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