logo标签列表

Typeahead.js干扰了Bootstrap输入组。

javascripthtmlcsstwitter-bootstraptypeahead.js
25
如何防止Typeahead.js分离我的Twitter Bootstrap 3输入组？当我将Typeahead javascript指向作为输入组一部分的文本区域时，连接的文本区域和提交按钮停止连接。这只是Typeahead中的一个错误吗？还是有解决方法？
没有加载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>
4
不确定这是否有帮助，但有一个项目提供了typeahead.js的Bootstrap风格（包括Less和CSS），你可以尝试一下。 - Audrius Kažukauskas
我也遇到了同样的问题！你在这方面有任何进展吗？ - xCNPx
上述项目在某种程度上对我有所帮助。 - daniel.sedlacek
5个回答
30
.twitter-typeahead { 左浮动; 宽度：100％ }
3
这个答案是不正确的，不应该得到赞同。这使它们更加靠近，但没有将它们连接起来，也没有解决文本框左侧是方形的问题。 - caitlin
14
我的工作流程不使用less，所以这对我来说并不起作用。 - caitlin
2
@schnauss 我的问题也不是因为less，解决方案与less无关。 - daniel.sedlacek
运作得很好，但缺少一件事：.twitter-typeahead > .form-control{ width: inherit !important; }。加入它来调整输入字段的宽度。 - Gellweiler
只需从引用的 Github 页面中简单地引入 typeahead.css（版本0.2.3），添加链接，typeahead（版本0.11.1）就可以正常工作了。 - Nico de Wet
8

Bootstrap v4 解决方案：

.input-group > .twitter-typeahead {
   flex: 1 1 auto;
   width: auto;
}
这对我有用，谢谢。虽然我不需要width: auto规则适用于我的版本，可能是因为我从这里https://github.com/bassjobsen/typeahead.js-bootstrap4-css/使用了其他BS4更改的CSS。 - Jon
几乎完美。将此添加以在左侧删除输入半径： border-top-left-radius: 0; border-bottom-left-radius: 0; }``` - Displee
这个解决方案帮助我解决了使用 Bootstrap v5 的 Blazored-Typeahead 组件的完全相同的问题。 - Tegge
3
也许？
.twitter-typeahead > .form-control{
  width: inherit !important;
}
2
这个修复方案解决了文本框左侧为正方形（而非圆角）时的问题：
.input-group .twitter-typeahead .form-control:not(:first-child):not(:last-child) {
  border-radius: 4px 0px 0px 4px;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接