Bootstrap：使用typeahead with grid，这是一个bug吗？

Question

我正在使用带有网格的bootstrap表单。表单已在网格中，但在选择预先输入后网格会发生变化。这是一个错误吗？

http://jsfiddle.net/wcQKP/（必须将html部分调整为宽视图以查看网格）

$(document).ready(function () {
... 

$('#inputEmail').typeahead({
...

Answer 1

这是因为：

.controls-row [class*="span"]+[class*="span"] {
    margin-left: 20px;
}

仅当包含单词span的类的元素后面紧跟另一个包含该相同单词且位于具有controls-row类的对象内的元素时，才会应用此属性。
（http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors）

加载页面时这是有效的：

<div class="controls controls-row">
  <input type="text" name="email" id="inputEmail" placeholder="Email" class="span3">
  <input type="password" name="password" id="inputEmail" placeholder="Password" class="span2">
</div>

但是一旦触发typeahead，就会添加一个新的HTML元素：

<div class="controls controls-row">
  <input type="text" name="email" id="inputEmail" placeholder="Email" class="span3">
  <ul class="typeahead dropdown-menu" style="top: 90px; left: 210px; display: none;">
    <li data-value="gmail.com" class="active"><a href="#">gmail.com</a></li>
  </ul>
  <input type="password" name="password" id="inputEmail" placeholder="Password" class="span2">
 </div>
</div>

你可以通过添加你的css来解决这个问题：

@media (min-width: 768px) {
  #inputPassword {
      margin-left: 20px;
  }
}

请参阅工作示例：http://jsfiddle.net/wcQKP/2/

注意：我将密码输入的ID从inputEmail更改为inputPassword