Bootstrap от Twitter — ввод формы слишком тонкий

Я использую Twitter Bootstrap для создания HTML/CSS для своего веб-сайта. Однако я столкнулся с проблемой при создании форм:

скриншот ошибки

Как видите, входные данные слишком малы для текста. Я протестировал свой собственный код, а также скопировал/вставил точный код из их документации:

http://twitter.github.com/bootstrap/base-css.html#forms

Я включаю два ресурса:

<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

Насколько я могу судить, они загружаются правильно. Я пропустил ресурс?


html css twitter-bootstrap
person sdasdadas    schedule 07.02.2012    source источник
comment
Проверяли ли вы в Chrome Inspector или Firebug, где переопределяется высота?   -  person David John Smith    schedule 07.02.2012
comment
он получает высоту от вашего локального css, смотрите входные данные формы в вашем локальном css и удаляйте его. Только по скриншоту сложно догадаться   -  person AlexC    schedule 07.02.2012
comment
Я попытался настроить несколько вещей, и я это исправил. Я не уверен, что я сделал неправильно, но я сделал что-то неправильно - это не поведение по умолчанию. (Кроме того, у меня нет локального CSS.) РЕДАКТИРОВАТЬ: я вернусь и обновлю, как только выясню, где я ошибся.   -  person sdasdadas    schedule 07.02.2012

Ответы (4)


arrow_upward
41
arrow_downward

Черт. мне не хватало

<!DOCTYPE html>

вверху документа.

person sdasdadas    schedule 07.02.2012
comment
Это также иногда происходит, когда у вас есть ошибка PHP где-то на вашей странице; иногда они появляются перед типом документа, что означает, что браузер не признает их. Хотя я уверен, что ошибка PHP будет выше в списке приоритетов; P - person Jarrod Mosen; 02.05.2012
comment
Важная деталь: это ‹!DOCTYPE html›, а не ‹!DOCTYPE HTML›, это не работает в верхнем регистре! - person Dominique Guardiola; 23.07.2012

arrow_upward
6
arrow_downward

Исправление <!DOCTYPE html> у меня не сработало. Но что помогло, так это найти и удалить следующее в нашей кодовой базе:

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
person stigi    schedule 20.01.2013
comment
Здорово! Была такая же проблема, и это была проблема. - person lbergnehr; 22.07.2013
comment
у меня та же проблема. У кого-нибудь есть объяснение этому? Я не хочу менять такие фундаментальные вещи. - person daniel; 26.08.2013

arrow_upward
2
arrow_downward

Что исправило это для меня, так это добавление class="form-control" к входу.

person KST    schedule 25.06.2014

arrow_upward
-1
arrow_downward

Хорошо, у меня была та же проблема, и после нескольких недель поиска решения этот парень решил мою проблему!

получение application.css для переопределения начальной загрузки

1 — создайте файл assets/stylesheets/my_styles.css.scss

2 - поместите приведенный ниже код в файл my_styles.css.scss:

input[type=text], input[type=password], input[type=email], input[type=tel] {
height: 33px !important;}

3 - В assets/stylesheets/application.css поместите это:

*= require my_styles

после начальной загрузки... в моем случае это:

*= require font-awesome
*= require bootstrap_sb_admin_base_v2
*= require_self
*= require my_styles
*= require_tree .
*/

Надеюсь, это поможет кому-то в беде!

person Jhonnatas Alencar    schedule 29.05.2017