Typeahead.js配合Bootstrap5使用时输入框宽度收缩被截断问题求助

问题原因 #

typeahead.js 初始化时会自动在添加了.typeahead类的输入框外层包裹一个<span class="twitter-typeahead"></span>元素，该元素默认为 inline-block 属性，在 Bootstrap 5 的.input-group flex 布局下无法自动占满父容器剩余宽度，导致内部输入框被压缩，和上方邮箱输入框宽度不一致。

解决方法 #

在你的自定义CSS中添加以下代码即可修复宽度问题：

/* 适配typeahead在Bootstrap input-group内的宽度 */
.input-group .twitter-typeahead {
  flex: 1 1 auto;
  width: 1%;
}
.input-group .twitter-typeahead .tt-input {
  width: 100% !important;
}

可选优化 #

你当前的符号输入框标签重复定义了class属性，可以合并为一个避免不必要的属性冲突：

<!-- 修改前 -->
<input class="form-control typeahead" name="symbols" id="symbols" type="text" class="form-control me-2" placeholder="Pick the symbols that you want to monitor">
<!-- 修改后 -->
<input class="form-control typeahead me-2" name="symbols" id="symbols" type="text" placeholder="Pick the symbols that you want to monitor">

内容的提问来源于stack exchange，提问作者Carol.Kar