Twitter Bootstrap: окно поиска с добавлением ввода

Я пытаюсь использовать поиск с добавлением ввода в Twitter Bootstrap, и он не выравнивает текстовое поле и кнопку поиска. Я взял последнюю и самую лучшую загрузочную загрузку Twitter 2.1 от 20 августа (схватил сегодня). так что такие вещи, как «white-space: nowrap;» уже установлены.

Любые идеи?

Код:

<li class="dropdown">
<a class="dropdown-toggle" id="Search" role="button" data-toggle="dropdown" href="#">Search<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" ara-labelledby="Search">
 <form class="form-search">
  <div class="input-append">
   <input type="text" class="search-query">
   <button type="submit" class="btn"><i class="icon-search"></i></button>
  </div>
 </form>
</ul>
</li>

Образец изображения:

Пример изображения


php css twitter-bootstrap
person Andrew    schedule 29.08.2012    source источник
comment
Не могли бы вы настроить jsfiddle с вашим css? Трудно устранить неполадки только с html...   -  person Kostia    schedule 29.08.2012
comment
Пробовали ли вы размещать элементы ‹input› и ‹button› в одной строке без пробелов между ними? вот так: <input type="text" class="search-query"><button type="submit" class="btn"><i class="icon-search"></i></button>   -  person John Klakegg    schedule 29.08.2012
comment
@Kostia jsfiddle.net/3zx4K/1   -  person Andrew    schedule 29.08.2012
comment
@John Klakegg Я попробовал это и получил те же результаты.   -  person Andrew    schedule 29.08.2012
comment
удалить верхнее поле: 6px; из .navbar .btn, .navbar .btn-group или переопределить его на 0px.   -  person Miljan Puzović    schedule 29.08.2012
comment
Это исправляет подкладку вверху, но текстовое поле по какой-то причине все еще меньше кнопки, когда я запускаю его через MAMP (локально). jsFiddle показывает это правильно. Идеи?   -  person Andrew    schedule 30.08.2012
comment
рабочая версия сайта на collecthw.com/ci, чтобы увидеть, что происходит (скопировано и вставлено в jsfiddle, все работает , локально это не так)   -  person Andrew    schedule 30.08.2012
comment
@ Эндрю Уилсон Хорошо, в 2.0.4 это было бы исправлено, если я правильно помню. Только что просмотрел сообщения о проблемах для 2.1.0 и заметил следующее: github.com/twitter/bootstrap/ Issues/4680, хотя в этом посте нет jsfiddle, мне кажется, что это может быть то же самое, что и у вас, и это исправлено в грядущем патче 2.1.1.   -  person John Klakegg    schedule 30.08.2012
comment
@JohnKlakegg Это больше не проблема с верхним полем (после установки margin-top: на 0px. Похоже, что текстовое поле выглядит так, как будто текстовое поле не имеет установленной высоты по вертикали. Это не то, что я думаю около 5px   -  person Andrew    schedule 30.08.2012

Ответы (2)


arrow_upward
3
arrow_downward

Вам не хватает правильного объявления типа документа. Вам нужно <!DOCTYPE html> вместо <html>, вот что вызывает аномалию.

Подсказка

Я также просмотрел http://collecthw.com/ci. Я настоятельно рекомендую вам использовать http://validator.w3.org/, в разметке много ошибок. Случаи <div><form></div></form>, что явно нехорошо. Я также мог обнаружить несколько тегов <body> вместе с несколькими версиями jquery.

Я также думаю, что разметка полностью отличается от того, что предлагает загрузчик. Модальная разметка в раскрывающемся списке не кажется правильной. Если вы следуете разметке, предоставляемой bootstrap, и расширяете ее, если хотите , вам все будет намного проще :)

person John Klakegg    schedule 30.08.2012
comment
!DOCTYPE полностью устранил проблему с IE, но Chrome, Safari, Firefox имеют одинаковую проблему. Я просмотрю код и удостоверюсь, что упоминается только одна версия jquery и что теги открываются и закрываются в правильном порядке. - person Andrew; 30.08.2012
comment
Хорошо! Возможно, было немного неясно, но вам нужны и <!DOCTYPE html>, и <html>. - person John Klakegg; 30.08.2012
comment
И это исправлено! @John Klakegg, я должен тебе пиво! - person Andrew; 30.08.2012

arrow_upward
1
arrow_downward

Добавьте это к кнопке css: margin-top: 0;

person Kostia    schedule 29.08.2012
comment
у меня была такая же проблема, и это исправило ее. почему это там в первую очередь сбивает меня с толку. - person Hayk Saakian; 25.09.2012
comment
@HaykSaakian, кажется, проблема с тем, что фактическое поле поиска находится внутри заголовка ... когда я помещаю его прямо в тег body, он отлично выстраивается: jsfiddle.net/ksokhan/3zx4K/2 - person Kostia; 25.09.2012