javascript - Bootstrap：在网格中使用 typeahead，这是一个错误吗？

Question

我正在使用带有网格的引导程序作为表单。表单在网格中，但在选择预输入后网格会发生变化。这是一个错误吗？

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