booststrap令牌字段在iOS safari中激活时会展开。如何解决?

booststrap令牌字段在iOS safari中激活时会展开。如何解决?,ios,twitter-bootstrap,mobile-safari,bootstrap-tokenfield,Ios,Twitter Bootstrap,Mobile Safari,Bootstrap Tokenfield,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">&

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>

函数make_tokenfield(){
$('#tokenfield')。tokenfield({
自动完成:{
资料来源:[“红色”、“蓝色”、“绿色”、“黄色”、“紫色”、“棕色”、“紫色”、“黑色”、“白色”],
延误:100
},
showAutocompleteOnFocus:真
})
};
$(文档).ready(生成标记字段);
容器{
边界:1px;
保证金:10美元;
}
我试着把它放到
jsfiddle
中,但它扭曲了行为。你可以在这里看到:

当它第一次加载时,看起来是这样的

但是,一旦我触摸文本输入,文本输入就会扩展并占据整个屏幕的宽度(可能更多)。下拉列表的一部分被推离屏幕,因此选项不可见

代码有什么问题