Html Contenteditable div光标位于div之外

我有一个div，它的属性是

contenteditable=“true”

，但chrome（Ubuntu 14.04）将光标放在div之外，如图所示：

它为什么这样做？我正在使用此html（与smarty一起使用）：

这是一个chrome bug，还是我可以修复的，如何修复

---

我可以通过向表单控件添加一个

输入组来解决这个问题，如下所示：

<div class="col-sm-6">
    <div class="form-control" contenteditable="true" id="tags">
        <div class="input-group">
            <div contenteditable="false" class="tag">one <a href="" class="glyphicon glyphicon-remove"></a></div>
            <div contenteditable="false" class="tag">two <a href="" class="glyphicon glyphicon-remove"></a></div>
        </div>
    </div>
</div>


1
2

你可以在这里看到小提琴：
我在Ubuntu 14.04上：一定是一个引导错误，因为我主要是添加了引导，这几乎是唯一的区别。
input group
有什么样式属性这是一个引导类
.tag{
    background-color: #01b6ef;
    color: #012935;
    display: inline-block;
    padding: 1px 5px;
    margin-right: 3px;
}

.tag a{
    color: #ffffff;
    margin-left: 5px;
    font-size: 12px;
}
.tag a:hover{
    color: #ffffff;
}

<div class="col-sm-6">
    <div class="form-control" contenteditable="true" id="tags">
        <div class="input-group">
            <div contenteditable="false" class="tag">one <a href="" class="glyphicon glyphicon-remove"></a></div>
            <div contenteditable="false" class="tag">two <a href="" class="glyphicon glyphicon-remove"></a></div>
        </div>
    </div>
</div>