Typeahead.js 干扰 Bootstrap 输入组

Posted

技术标签:

【中文标题】Typeahead.js 干扰 Bootstrap 输入组【英文标题】:Typeahead.js interferes with Bootstrap input groups 【发布时间】:2014-04-12 03:52:21 【问题描述】:

如何防止 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>

【问题讨论】:

不确定这是否会有所帮助,但有一个 project 为 typeahead.js(Less 和 CSS)提供 Bootstrap 样式。您可能想尝试一下。 我也遇到了同样的问题!您在这方面取得了进展吗? 上面提到的项目对我有部分帮助。 【参考方案1】: .twitter-typeahead 浮动:左;宽度:100%

【讨论】:

这个答案不正确,不应该被赞成。这将它们挤得更近了,但它并没有加入它们,而且它对文本框的左侧是方形的没有任何作用。【参考方案2】:

这个项目为我解决了部分问题:https://github.com/hyspace/typeahead.js-bootstrap3.less

唯一突出的问题是当我对 .btn 和 .form-control 应用阴影效果时,阴影也在输入字段和按钮之间绘制。

【讨论】:

我的工作流程没有使用 less,所以这对我来说真的不起作用。 @schnauss 我的也不是,解决方案不依赖于less。 效果很好,但缺少的一件事是:.twitter-typeahead &gt; .form-control width: inherit !important; 。添加它以调整输入字段的宽度。【参考方案3】:

Bootstrap v4 解决方案:

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

【讨论】:

这对我有用,谢谢。虽然我不需要宽度:我的版本的自动规则,大概是因为从这里使用 css 进行其他 BS4 更改 github.com/bassjobsen/typeahead.js-bootstrap4-css 几乎完美。添加此以删除左侧的输入半径:.input-group&gt;.twitter-typeahead &gt; .form-control:not(:first-child) border-top-left-radius: 0; border-bottom-left-radius: 0; 这个解决方案帮助我解决了与 bootstrap v5 的 blazored-typeahead 组件完全相同的问题。【参考方案4】:

也许?

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

【讨论】:

【参考方案5】:

这解决了文本框左侧为方形(非圆角)时的问题:

.input-group .twitter-typeahead .form-control:not(:first-child):not(:last-child) 
  border-radius: 4px 0px 0px 4px;

【讨论】:

以上是关于Typeahead.js 干扰 Bootstrap 输入组的主要内容,如果未能解决你的问题,请参考以下文章

混合 Typeahead.js 和 Bootstrap 3

x-editable + bootstrap 3 + Twitter typeahead.js 不工作

Bootstrap中的 Typeahead 组件

Twitter typeahead .js 文件未更新

来自 mysql/JSON 的 twitter bootstrap typeahead 源

bootstrap实践录:输入框自动补全-typeahead篇