Я использую новый Twitter Bootstrap 3 и пытаюсь разместить окно поиска, подобное этому (ниже), в верхней панели навигации :
В Bootstrap 2 это можно было бы сделать так:
<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>
Но я не уверен, как произвести то же самое в Bootstrap 3, так как многое изменилось.
HTML-код по умолчанию для формы окна поиска панели навигации в Bootstrap 3:
<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>
Как мне изменить его, чтобы добиться того, что мне нужно?
Ответы:
Я запускаю BS3 на сайте разработчика, и следующее производит эффект / макет, который вы запрашиваете. Конечно, вам понадобятся глифы, установленные в BS3.
ОБНОВЛЕНИЕ: см. JSFiddle
источник
Это самое близкое, что я мог бы получить без добавления какого-либо пользовательского CSS (это я уже понял на момент постановки вопроса; думаю, я должен придерживаться этого):
И разметка в использовании:
PS: Конечно, это можно исправить, добавив минус
margin-left
(-4px) на кнопку, удаливborder-radius
по бокамinput
иbutton
встретив. Но весь смысл этого вопроса в том, чтобы заставить его работать без какого-либо специального CSS.источник
Вы можете использовать пример сегментированных кнопок из Bootstrap 3:
источник
Я попробовал код @PhilNicholas и получил ту же проблему, что @its_me сказал в комментариях, что строка поиска отображается на следующей строке панели навигации, и я обнаружил, что
form
необходимо добавить атрибутwidth
.источник
<div class="input-group" style="width:15em;">
Это я реализовал для своего сайта, если кто-то получил больше нет пункта меню и более длинная строка поиска может использовать это
Вот код
источник
источник