Почему поля формы Twitter-бутстрапа заполняют их хорошо, используя контейнер для жидкости?

ОБНОВЛЕНИЕ: Демо-проблема здесь: http://jsfiddle.net/fdB5Q/embedded/result/

От приблизительно 767px до 998px поля формы шире, чем содержащая скважина.

Меньше 767px и вся область формы смещается в новую строку. Отображаемая страница, когда окно браузера имеет ширину около 200 пикселей, отлично выглядит. Поля формы сокращаются, как и следовало ожидать.

Для визуального просмотра этот очень похожий вопрос: Twitter Bootstrap CSS статично-жидкостная форма позиционирования

Вот все в голове:

   

Здесь все в теле:

 

Some Content.

Я думаю, что я недопонимаю какую-то часть структуры. Должен ли я не использовать контейнер для жидкости? Что я делаю не так? Я мог бы собрать что-то, чтобы исправить это, но я думаю, что проблема может заключаться в том, что я делаю что-то неправильное.

Я попытался изменить свои интервалы на 7 и 5 и по-прежнему имел ту же ошибку. Я пробовал 6 и 6, но в этот момент страница стала выглядеть нелепо. Остальные ответы не имели смысла для меня.

Я изменил class ввода на большой, а не на xlarge. У него все еще был диапазон ширины, где он переполнялся, и мне действительно нравятся более широкие поля формы, если на дисплее есть место.

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

ОБНОВЛЕНИЕ: Фотографии

Моя страница проблем:

проблемная страница

Упрощенная версия:

простая версия

Упрощенная версия с шириной браузера 200 px:

простая версия с шириной 200 пикселей

Входные tags html и их соответствующие .input-* стили устанавливают только width css. Это по дизайну.

Но добавление css max-width:100% гарантирует, что слишком большие входы будут находиться под контролем.
например, добавьте это в свою голову:

  

Обычно я предпочитаю использовать другой class="row-fluid" и class="span12" в элементах с class="spanX" чтобы получить 100% ширину некоторого элемента. Это не вызовет ошибок при разных разрешениях. Итак, я добавил еще один class row-fluid class в свой элемент с classом span4 , и внутри этой новой row-fluid добавлен div с span12 . Вы должны что-то переопределить настройки Bootstrap по умолчанию, чтобы получить то, что вам нужно, поэтому я добавил также class .my-input внутри элемента чтобы получить 100% ширину и удалить левое и правое заполнение (добавление приведет к ошибке с правой стороны) , И вот код:

 

Some Content.

и class CSS для переопределения

 ​.my-input { width: 100%; padding: 4px 0 4px 0 !important; }​ 

Вы можете увидеть и демонстрацию Jsfiddle , попробуйте resize экрана.

Я только что наткнулся на эту проблему и проверял документы начальной загрузки для входных данных формы: «Использовать относительные classы просеивания, такие как .input-large или соответствовать вашим входам в размер столбцов сетки, используя classы .span *».

Моя строка начальной загрузки была установлена ​​на span9 для содержимого и span3 для боковой панели. Установка решила проблему для меня, поля ввода остаются в боковой панели по мере уменьшения размера экрана.

Просто немного ввода после игры с этими FOREVER (кажется). Я использую простой атрибут width и устанавливаю его между 85% и 95% в зависимости от контейнера, дополнения и других факторов css, чтобы сохранить поля ввода от фактического растяжения до края контейнера.

 .input-example { width: 90%; } 

Я НЕ ЭКСПЕРТ НА ЭТО! Я просто предлагаю то, что я узнал, и, пожалуйста, не принимайте это за советы опытного разработчика. Попытка дать немного назад сообществу, которое спасло мою жизнь в бесчисленных случаях.

К сожалению, проблема более коварна, чем все это. Использование max-width ничего не сделало для меня. И я ненавижу то, что выглядит дерьмовым, поэтому я немного впился в него …

Это сводится к этим трем строкам в css-декларации формы-контроля:

 width: 100%; padding: 6px 12px; border: 1px solid #cccccc; 

Когда задана ширина входного элемента текстового типа, горизонтальное заполнение и граница добавляются к 100% вместо взятого из него. Итак, если бы ширина 100% w говорила, 500px, тогда ширина элемента ввода формы ввода будет w + 12 + 12 + 1 + 1, 526px. Дополнительные 26px являются константой, которая означает, что если процентная доля ширины вычисляется динамически либо как 100% * (w / (w + 26px)), либо 100% -26px, вещи никогда не выйдут.

Я лично считаю, что это ошибка в определении или реализации интерфейса html / css (я не знаю, что, я действительно не хочу пытаться найти ссылки в смещающихся песках стандартов.) Если вы скажем, что поле ввода будет 100% шириной, тогда необходимо применить коррекцию, чтобы ширина внутри полей составляла 100%, а не 100% без включенной горизонтальной прокладки и ширины границ.

И, кстати, процентное значение или фиксированный размер не имеет значения; они также отключены на 26 пикселей. Вам нужно отфильтровать эти 26 пикселей по ширине.

Все не потеряно для загрузочных текстовых входов, хотя, по крайней мере, если вы используете компилятор CSS, который позволяет рассчитывать на стороне клиента. Менее, например

 input.form-control[type=text] { width: calc(~'100%-26px'); } 

сделает все лучше. Обратите внимание, что для электронной почты и типов паролей (по крайней мере) есть такая же проблема.

Конечно, 26px является хрупким, но константы жестко закодированы в декларации формы, так что ваши руки отчасти связаны. Было бы неплохо проверить, проверяли ли размеры элементов управления на рендеринг, чтобы улавливать изменения объявления CSS при обновлениях начальной загрузки, но не сегодня, спасибо.

Как указал Павел в этом ответе: Twitter Bootstrap: остановить поле ввода, выходящее за пределы

Использование уровня input-block-level classа вместо ввода-xlarge (или других размеров) также решает проблему.

Я столкнулся с этой проблемой с вводом форм и корпусом панели. Я ответил на него в следующем элементе: Twitter Bootstrap: остановить поле ввода, выходящее за пределы

Проблема для меня заключалась в том, что форма была переполнена. Это позволило вводить последующие данные. Зафиксировав максимальную ширину формы (max-width: 100%), я смог зафиксировать входы, а также любой другой контент, который может быть помещен внутри формы.