Bezdepbonusu7Программирование: статьи и ответы
Меню

Вопрос

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

Автор вопроса: AndrewОтветов: 2

Я пытаюсь использовать поиск с добавлением ввода в 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>

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

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

  • Не могли бы вы настроить jsfiddle с вашим css? Трудно устранить неполадки только с html... Kostia 29.08.2012
  • Пробовали ли вы размещать элементы ‹input› и ‹button› в одной строке без пробелов между ними? вот так: <input type="text" class="search-query"><button type="submit" class="btn"><i class="icon-search"></i></button> John Klakegg 29.08.2012
  • @Kostia jsfiddle.net/3zx4K/1 Andrew 29.08.2012
  • @John Klakegg Я попробовал это и получил те же результаты. Andrew 29.08.2012
  • удалить верхнее поле: 6px; из .navbar .btn, .navbar .btn-group или переопределить его на 0px. Miljan Puzović 29.08.2012
  • Это исправляет подкладку вверху, но текстовое поле по какой-то причине все еще меньше кнопки, когда я запускаю его через MAMP (локально). jsFiddle показывает это правильно. Идеи? Andrew 30.08.2012

phpcsstwitter-bootstrap

Ответы

Ответ 1 · рейтинг 3 · John Klakegg

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

Подсказка

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

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

Ответ 2 · рейтинг 1 · Kostia

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

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы