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

我在表格上使用带有网格的引导程序.表单在网格中,但是选择预输入后网格会发生变化.这是错误吗？

http://jsfiddle.net/wcQKP/(必须调整html部分的大小才能看到网格)

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

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

解决方法:

发生这种情况是由于以下原因：

.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>

但是,一旦您触发预输入,就会添加一个新的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

标签：twitter-bootstrap,css,html,javascript
来源： https://codeday.me/bug/20191123/2066754.html