Javascript Typeahead.js干扰引导输入组

如何防止Typeahead.js拆分我的Twitter Bootstrap 3输入组？每当我将Typeahead javascript指向作为输入组一部分的文本区域时，连接的文本区域和submit按钮就会停止连接。这只是Typeahead中的一个bug，还是有解决方法

不加载Typeahead.JS：

使用Typeahead.JS：

我的原始HTML：

    <div class="col-sm-4 hidden-xs">
    <form class="navbar-form" role="search">
        <div class="input-group">
        <input type="text" id="tags" class="form-control" name="q">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit">Search</button>
            </div>
        </div>
    </form> 
    </div>

搜寻

这就是Typeahead对该HTML的作用：

<div class="col-sm-4 hidden-xs">
        <form class="navbar-form" role="search">
            <div class="input-group">
            <span class="twitter-typeahead" style="position: relative; display: inline-block;">
            <input type="text" class="form-control tt-hint" disabled="" autocomplete="off" spellcheck="false" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 255, 255); background-image: none; background-origin: padding-box; background-size: auto; background-position: 0% 0%; background-repeat: repeat repeat;">
            <input type="text" id="tags" class="form-control tt-input" name="q" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;">
            <pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: nowrap; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;">
            </pre>
            <span class="tt-dropdown-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;"><div class="tt-dataset-0"></div>
            </span>
            </span>
                <div class="input-group-btn">
                    <button class="btn btn-default" type="submit">Search</button>
                </div>
            </div>
        </form> 
        </div>

搜寻

.twitter typeahead{float:left；width:100%}

---

这解决了文本框左侧为方形（非圆形）时的问题：

---

该项目部分解决了我的问题：

唯一未解决的问题是，当我将阴影效果应用于.btn和.form控件时，阴影也会在输入字段和按钮之间绘制

可能吧

.twitter-typeahead > .form-control{
  width: inherit !important;
}

引导v4解决方案：

.input-group > .twitter-typeahead {
   flex: 1 1 auto;
   width: auto;
}

---

不确定这是否有帮助，但有一个为typeahead.js（Less和CSS）提供引导风格的方法。你可能想试试。我也有同样的问题！你在这方面有什么进展吗？上面提到的项目对我有部分帮助。这个答案是不正确的，不应该被高估。这会将它们挤得更近，但不会将它们连接在一起，也不会使文本框的左侧变成正方形。我的工作流程不会使用更少的内容，因此这对我来说确实不起作用。@Schnaus和我的一样，解决方案不依赖更少的内容。效果很好，但是缺少的一件事是：

.twitter typeahead>.formcontrol{width:inherit！important；}

。添加它以调整输入字段的宽度。只需从引用的github页面中合并typeahead.css（版本0.2.3），添加链接，typeahead（版本0.11.1）就可以正常工作。这对我很有效，谢谢。虽然我的版本不需要width:auto规则，可能是因为在这里使用css对其他BS4进行了修改，几乎完美无瑕。添加此项以删除左侧的输入半径：

.input group>.twitter typeahead>。表单控件：not（：first child）{边框左上半径：0；边框左下半径：0；}

.twitter-typeahead > .form-control{
  width: inherit !important;
}

.input-group > .twitter-typeahead {
   flex: 1 1 auto;
   width: auto;
}