Bootstrap Typeahead带有长文本的宽度

Question

我有4个输入位于.col-md-3中，如下所示：

<div class="row">
    <div class="col-md-3">
        <input id="input1" type="text">
    </div>
    <div class="col-md-3">
        <input id="input2" type="text">
    </div>
    <div class="col-md-3">
        <input id="input3" type="text">
    </div>
    <div class="col-md-3">
        <input id="input4" type="text">
    </div>
</div>

我正在使用Typeahead plugin。我的js工作使得Typeahead仅适用于#input3：

$('#input3').typeahead({
      ajax: '/getdata.php'
});

返回的部分文本很长（例如超过300个字符）。这个问题是它不适合Typeahead下拉框。它像盒子一样“重叠”盒子外面：

我已阅读extending the width of bootstrap typeahead to match input field，但这些都没有为我解决。我想知道他们是否已弃用解决方案。

Bootstrap版本 3.3.7

Answer 1

如果您添加overflow-x: hidden;（或者如果您希望能够滚动，则自动/滚动），这应该有效吗？

希望overflow属性适合您。

编辑：经过一番谷歌搜索，我发现一篇文章记录了Typeahead在开发过程中遇到了设计问题[特别是与输入有关]。那里。最后有一个article here注释它以及它最后如何修复它。

  

注意：在我们将它与twitter一起使用时，typahead js存在设计问题   bootstrap 3.本教程我已经在css和你中添加了修复程序   必须根据输入控件大小添加以下jquery脚本

     

的JavaScript

$('.typeahead.input-sm').siblings('input.tt-hint').addClass('hint-small');
$('.typeahead.input-lg').siblings('input.tt-hint').addClass('hint-large');

$('.typeahead.input-sm').siblings('input.tt-hint').addClass('hint-small');
$('.typeahead.input-lg').siblings('input.tt-hint').addClass('hint-large');

还发现了这个由{hyspace＆＃39; hyspace创建的'fix' on github - typeahead.js / bootstrap3.less

以下是修补程序所基于的代码的jsfiddle示例。我将它分叉以调整条目，使得长文本在你的情况下会溢出。正如您将看到的那样，在小提琴的预先输入框中，文本不会延伸到框外，而是包裹文本。

按＆＃39; H＆＃39;在第二个框中查看此示例。

（请注意，小提琴只使用修复 基于 的代码 - 我还没有使用过typeahead.js-bootless3.less，但是我怀疑你是否必须对这些值进行硬编码！实际上，在github上更仔细地阅读该页面时，它的风格比调整后的任何内容都要多，而不是js。）

Answer 2

尝试添加CSS样式：

white-space: normal;

Answer 3

我能够通过将宽度设置为最大内容来添加CSS样式来解决此问题：

Time: 2522ms