在Bootstrap UI中设置Typeahead下拉样式

Question

我正在开发一个使用AngularJS和Bootstrap的应用。为了提供帮助，我使用了Bootstrap UI。在这个项目中，我使用了typeahead控件。我试图制作出现在文本框下方的列表，宽度与文本框本身相同。无论。这时，它总是在改变大小。但是，我不知道如何做到这一点让建议框与文本框的宽度相同。目前，我正在尝试以下方法：

Here is my plunker

目前，我有以下内容，但无法正常使用。

.dropdown-menu {
  width:75%;
}

有人可以帮助我将建议列表的宽度与文本框的宽度相同吗？

谢谢！

Answer 1

您可以使用CSS3 calc()动态计算.dropdown-menu的宽度。

.dropdown-menu{
   width: -moz-calc(100% - 28px);
   width: -webkit-calc(100% - 28px);
   width: calc(100% - 28px);
}

并从white-space: nowrap;移除.dropdown-menu>li>a。希望它会对你有所帮助！