带有长文本的 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');

还发现了这个'fix' on github，由“hyspace”创建 - typeahead.js/bootstrap3.less

这是修复所基于的代码的jsfiddle 示例。我将它分叉以调整条目以具有在您的情况下会溢出的长文本。正如您将看到的，在小提琴的预输入框中，文本不会超出框，而是换行。

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

（请注意，小提琴只使用了修复基于的代码 - 我没有使用 typeahead.js-bootless3.less，但我怀疑是否必须对值进行硬编码！实际上，仔细阅读github上的页面后，调整的是样式而不是任何东西，而不是js。）

Answer 2

我可以通过将宽度设置为 max-content 添加 css 样式来解决这个问题：

.dropdown-menu {
  width: max-content;
  text-align: left;
}

Answer 3

尝试添加 CSS 样式：

white-space: normal;

Answer 4

这解决了我的问题：

.tt-menu {
   width: fit-content;
}