css - 元素的大小在不应该调整的时候调整

Question

我已经安装了这个包并且除了 css 之外都运行良好。我希望它看起来像任何其他文本字段，直到您单击并开始输入为止。然而，盒子的大小没有表现。当我从示例代码中删除 css 中的所有宽度信息时，这没有帮助。我希望它会成为一个正常大小的文本字段并与我的其他文本字段匹配。

虽然我确实看到了很短的一秒钟它确实显示了全宽然后重新渲染或缩小到更小的尺寸。我不确定我在这里遗漏了什么。

HTML调用

<input class="form-control typeahead clearForm box-size" name="customerSearch" type="text"
               placeholder="Customer Search:" autofocus="on"
               autocomplete="off" spellcheck="off" data-open="open" data-close="close" 
               data-select="select" data-autocomplete="autocomplete"
               data-source="customersTypeAhead"/>

CSS

/* basic typeahead styles */
.box-size{
  height: 23px; 
}

.typeahead,
.tt-query,
.tt-hint {

  padding: 8px 12px;
  line-height: 23px;
  border: 2px solid #ccc;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
      border-radius: 5px;
  outline: none;
}

.typeahead {
  background-color: #fff;
}

.typeahead:focus {
  border: 2px solid #0097cf;
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

.tt-menu {

  margin: 4px 0;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
       border-radius: 5px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
   -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
      box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
  padding: 3px 20px;
  font-size: 18px;
  line-height: 24px;
}

.tt-suggestion:hover {
  cursor: pointer;
  color: #fff;
  background-color: #0097cf;
}

.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}

它的外观图片

我想要的是它的宽度与其他没有设置宽度的框相同。感谢您的帮助。

Answer 1

这有点旧，但我今天遇到了同样的问题。在剖析示例文件、.js 和 .css 之后，我找到了它。你和我都在做同样的事情，我们错过了最后一个 css 语句，它使演示应用程序没有的宽度(在我的例子中)引导友好......

将此添加到您的 css 声明中，它应该可以工作:

.twitter-typeahead {
   width: 100%;
}

这对我有用。希望你之前找到它了!