播放框架bootstrap3标签输入

Question

我试图结合使用以下项目：

bootstrap tags input

play-boostrap-3

在大多数情况下，它运作良好。我遇到的唯一问题如下：

1. 带有'X'的跨度没有出现在标签上，如果用户想要删除2+元素中的第一个，这就成了一个问题，因为现在解决这个问题的唯一方法是退回所有元素并开始结束了。
2. 输入字段的样式本身与标签输入网站上显示的格式大不相同。

下面附带的屏幕截图显示了它的显示方式：



在输入标签时，输入字段本身似乎也会移到一边，而在示例页面上，标签会保留在输入字段本身内。

以下是此页面的旋转模板代码（为简洁起见，仅包含表格部分）：

@helper.form(action = routes.ResponseController.saveInterests()) {

    <h4>Hobbies</h4>
    @b3.text(interestsForm("watch"),'_label -> "My favorite sports/TV Series/movies to watch are...",'placeholder->"e.g. True Detective,NFL Football", Symbol("data-role")->"tagsinput",'_class -> "tagsinput",Symbol("data-hint") ->"Hit backspace to delete an entry")
    @b3.text(interestsForm("sport"),'_label -> " My favorite sports/activities to do are ...", 'placeholder->"e.g. badminton, swimming",Symbol("data-role")->"tagsinput",'_class -> "tagsinput",Symbol("data-hint") ->"Hit backspace to delete an entry")
    @b3.text(interestsForm("games"),'_label -> "My favorite games are...", 'placeholder->"e.g. Yu-Gi-Oh, Fallout",Symbol("data-role")->"tagsinput",'_class -> "tagsinput",Symbol("data-hint") ->"Hit backspace to delete an entry")
    @b3.text(interestsForm("interest"),'_label -> "Other favorite things I like are...",'placeholder->"e.g. cooking,politics,coffee", Symbol("data-role")->"tagsinput",'_class -> "tagsinput",Symbol("data-hint") ->"Hit backspace to delete an entry")
    @b3.text(interestsForm("uniqueInt"),'_label -> "Something I like, but none of my friends like are...",'placeholder->"e.g. Mac Miller,mimosas", Symbol("data-role")->"tagsinput",'_class -> "tagsinput",Symbol("data-hint") ->"Hit backspace to delete an entry")
    @b3.text(interestsForm("wan2try"),'_label -> "I always wanted to try...",'placeholder->"e.g. skydiving, ethiopian food", Symbol("data-role")->"tagsinput",'_class -> "tagsinput",Symbol("data-hint") ->"Hit backspace to delete an entry")
    <h4>General</h4>
    <p><i>No ideas? Think of your favorite music, sports, books, TV series, movies, games, art, food & drinks,
        computer & technology, fashion, cars, spirituality, politics ...</i></p>

    @b3.text(interestsForm("lookingFor"),'_label -> "I’m looking for people for...",'placeholder->"e.g. beach volleyball", Symbol("data-role")->"tagsinput",'_class -> "tagsinput",Symbol("data-hint") ->"Hit backspace to delete an entry")
    @b3.text(interestsForm("help"),'_label -> "I need some help with...",'placeholder->"e.g. fixing my car", Symbol("data-role")->"tagsinput",'_class -> "tagsinput",Symbol("data-hint") ->"Hit backspace to delete an entry")
    @b3.text(interestsForm("learnAbout"),'_label -> "I’d like to learn / get better at...",'placeholder->"e.g. iOS development,scala", Symbol("data-role")->"tagsinput",'_class -> "tagsinput",Symbol("data-hint") ->"Hit backspace to delete an entry")
    @b3.text(interestsForm("expert"),'_label -> "I'm really good at...",'placeholder->"e.g electric guitar,C++", Symbol("data-role")->"tagsinput",'_class -> "tagsinput",Symbol("data-hint") ->"Hit backspace to delete an entry")
    @b3.text(interestsForm("beginner"),'_label -> "I just started learning / doing...",'placeholder->"e.g. paddleboard yoga,rock climbing", Symbol("data-role")->"tagsinput",'_class -> "tagsinput",Symbol("data-hint") ->"Hit backspace to delete an entry")
    @b3.text(interestsForm("willing_to_teach"),'_label -> "Things I’m willing to teach / help out others with are...",'placeholder->"e.g. learning spanish,knitting", Symbol("data-role")->"tagsinput",'_class -> "tagsinput",Symbol("data-hint") ->"Hit backspace to delete an entry")
    @b3.buttonType("submit", 'class -> "btn btn-material-light-blue-700 pull-right btn-large"){Next}
}

这里有一小段javascript来编辑标签输入字段的宽度：

<script>
    $(window).load(function() {
            $("div.bootstrap-tagsinput > input").attr("style","width: 33em !important;");
    </script>