Przeprowadzam migrację z Twittera Bootstrap w wersji 2.3.2 do najnowszej wersji 3 RC 1. Teraz napotykam jeden problem z przyciskami wyszukiwania na górnym pasku nawigacyjnym. HTML kod jest poniżej:Formularz wyszukiwania przeciągnij w lewo/przeciągnij w prawo na pasku nawigacji nie działa poprawnie w Chrome
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<div class="nav-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Nav Item 1</a></li>
<li class="active"><a href="#">Nav Item 2</a></li>
<li><a href="#">Nav Item 3</a></li>
<li><a href="#">Nav Item 4</a></li>
</ul>
<form class="navbar-form pull-right">
<div class="input-group">
<input type="search" class="form-control" placeholder="Search"/>
<span class="input-group-btn">
<button type="submit" class="btn btn-default">Search</button>
</span>
</div>
</form>
</div>
</div>
</div>
</body>
Problemem jest to, że działa doskonale w Firefoksie, ale w Chrome lub IE 9 to sprawia, że okno wyszukiwarki bardzo długi, a więc porusza tego pola wyszukiwania i przycisk poniżej paska nawigacji.
Próbowałem rozwiązać problem i stwierdziłem, że usunąłem "wyciągnięcie z prawej strony" z formularza, pole wyszukiwania i przycisk zostaną przeniesione powyżej linii z elementami nawigacyjnymi, ale utracił on efekt, który przyniosła opcja "przeciągnij w prawo" - zajęłoby wszystko przestrzeń linii po prawej stronie.
Ponadto jako debugowania jeśli Wymieniłem formularz wyszukiwania z
<form class="navbar-form pull-right">
<div class="input-group">
<input type="text" placeholder="Search">
<button type="submit" class="btn btn-default">Search</button>
</div>
</form>
to będzie po prostu działał dobrze; ale to też nie jest mój cel.
Jakiekolwiek problemy z moim kodem? Czy jest to problem z wersją 3 RC 1? W każdym razie, aby rozwiązać ten problem?
Zamiast pull-prawo należy używać NavBar-prawo, zgodnie z docs. – mikeytusa