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

Ответ 1

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

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

<style>
    input {
        max-width: 100%;
    } 
</style>

Ответ 2

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

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span8">
            <p>Some Content.</p>
        </div>
        <div class="span4 well">
            <div class="row-fluid">
                <div class="span12">
                    <label class="control-label" for="name">Your Name</label>
                    <input type="text" class="my-input" name="name" id="name" maxlength="100" />
                </div>
             </div>
        </div>
  </div>
</div>

и класс CSS для переопределения

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

Вы можете увидеть и Jsfiddle demo, попробуйте изменить размер экрана.

Ответ 3

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

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

Ответ 4

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

.input-example {
   width: 90%; 
}

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

Ответ 5

Проблема более коварна, чем все это, к сожалению. Использование 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 пикселей. Вам нужно отфильтровать эти 26px по ширине.

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

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

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

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

Ответ 6

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

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

Ответ 7

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

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