Bootstrap: используя typeahead с сеткой, это ошибка?

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> 

Но как только вы вызываете машинописный, добавляется новый 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/

Примечание: Я изменил идентификатор для ввода пароля от inputEmail к