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在结尾处注明它以及它如何在最后修复它。

注意：typahead js在使用twitter 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'创建的'fix' on github - typeahead.js / bootstrap3.less

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

在第二个框中按“H”以查看此示例。

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

Answer 2

尝试添加CSS样式：

white-space: normal;