元素的大小不应该调整大小

Question

我安装了这个软件包并且除了css之外都运行良好。我希望它看起来像任何其他文本字段，直到您单击并开始键入。但是盒子的大小不符合规定。当我从示例代码中删除css中的所有宽度信息时，这没有帮助。我希望它会成为一个正常大小的文本字段，并与我的其他人匹配。

我确实看到它的显示全宽，然后重新渲染或缩小到更小的尺寸。我不确定我在这里缺少什么。

Html Call

<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%;
}

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