1

Bootstrap-tokenfield 网站http://sliptree.github.io/bootstrap-tokenfield/

这是我的测试代码：

<html>
<head>
<script type="text/javascript"
src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<LINK
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.css"
rel="stylesheet" type="text/css">
<LINK
href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"
rel="stylesheet" type="text/css">
<LINK
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/tokenfield-typeahead.css"
rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
function make_tokenfield() {
 $('#tokenfield').tokenfield({
  autocomplete: {
    source: ['red','blue','green','yellow','violet','brown','purple','black','white'],
    delay: 100
  },
  showAutocompleteOnFocus: true
 })
};

$(document).ready(make_tokenfield);
</script>
<style>
container {
border: 1px;
margin:10 auto;
}
</style>
</head>

<body>
<div class="container">
  <div class="form-group">
    <input type="text" class="form-control" id="tokenfield" value="blue"
    width="80%"/>
    </div>
</div>
</body>

</html>

我试图把它放进去，jsfiddle但它扭曲了行为。你可以在这里看到它：http: //jsfiddle.net/kongakong/aadt6xww/7/

首次加载时，它看起来像这样

在此处输入图像描述

但是，一旦我触摸文本输入，文本输入就会扩展并占据屏幕的整个宽度（也许更多）。下拉菜单的一部分被推离屏幕，因此选项是不可见的。

在此处输入图像描述

代码有什么问题？

4

0 回答 0