Używam nowego Twitter Bootstrap 3 i próbuję umieścić takie pole wyszukiwania (poniżej) na górnym pasku nawigacyjnym :
W Bootstrap 2 można było zrobić tak:
<form class="form-search" method="get" id="s" action="/">
<div class="input-append">
<input type="text" class="input-medium search-query" name="s" placeholder="Search" value="">
<button type="submit" class="add-on"><i class="icon-search"></i></button>
</div>
</form>
Ale nie jestem pewien, jak wyprodukować to samo w Bootstrap 3, ponieważ wiele się zmieniło.
Domyślny kod HTML dla formularza pola wyszukiwania paska nawigacyjnego w Bootstrap 3 to:
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Jak go zmodyfikować, aby osiągnąć to, czego potrzebuję?
Odpowiedzi:
Uruchamiam BS3 na stronie deweloperskiej i następujące efekty dają efekt / układ, o który prosisz. Oczywiście będziesz potrzebować glifów skonfigurowanych w BS3.
AKTUALIZACJA: Zobacz JSFiddle
źródło
To jest najbliższy, jaki mogłem uzyskać bez dodawania niestandardowego CSS (to już wyobrażałem sobie w momencie zadawania pytania; chyba muszę się tego trzymać):
I używane znaczniki:
PS: Oczywiście można to naprawić, dodając minus
margin-left
(-4px) na przycisku i usuwającborder-radius
po bokachinput
ibutton
spotkaniu. Ale cały sens tego pytania polega na tym, aby działał bez niestandardowego CSS.źródło
Możesz użyć przykładu segmentowanych przycisków z Bootstrap 3:
źródło
Wypróbowałem kod @PhilNicholas i otrzymałem ten sam problem, co @its_me powiedział w komentarzach, że pasek wyszukiwania pojawia się w następnym wierszu navbar i stwierdziłem, że
form
należy dodać atrybutwidth
.źródło
<div class="input-group" style="width:15em;">
Ten, który zaimplementowałem na swojej stronie internetowej, jeśli ktoś ma więcej pozycji menu i dłuższy pasek wyszukiwania, może z tego skorzystać
Oto kod
źródło
źródło