Почему мои поля щебетать Bootstrap форма переполнение их, используя контейнер для жидкости?

Ввод HTML-тегов и их соответствующая.стили ввода-*` задайте только ширину в CSS``. Это по дизайну.

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

    input {
        max-width: 100%;
    } 

Обычно я предпочитаю использовать другой класс="по-рядок-жидкость" ииclass="и span12"В В элементы с классом=то"под каблуком" и получить 100% ширина какого-то элемента. Это не вызовет ошибок на разных разрешениях. Так что, я'вэ добавилась еще одна строка-жидкость класса в своей стихии с span4 класса, и внутри этого нового ряда-жидкости-добавил див сspan12. Вы должны иногда переопределить параметры начальной загрузки по умолчанию, чтобы получить то, что вам нужно, так что я'ве добавил также класса.мои-ввода внутри <вход /> элемент, чтобы получить 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">
                    Your Name
                    <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 демо][1], Попробуйте изменить размер экрана.

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

Мой начальной загрузки строк был настроен на span9 за содержание и span3 на панели. Параметр <входной класс=&#39;span3&#39;/> решена проблема для меня, поля ввода остаются в пределах боковой панели, как размер экрана уменьшается.

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

.input-example {
   width: 90%; 
}

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

Проблема является более коварной, чем все это получить права, к сожалению. Используя максимум-ширину ничего не сделал для меня. И я ненавижу, что вещи выглядят херовый, так впились в нее немного...

Дело доходит до этих трех строк в CSS декларации формы контроля:

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

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

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

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

Не все потеряно для загрузки текстовых входов, хотя, по крайней мере, если вы're с помощью компилятора CSS, который позволяет расчеты стороны клиента. Меньше, например

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

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

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

Я натыкался на эту проблему с форм ввода и панели тела. Я ответил ему в следующем пункте: https://stackoverflow.com/questions/12195931/twitter-bootstrap-stop-input-field-extending-beyond-well?nah=1#28813614

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

Для любого, чтобы найти

HTML-код:

<input class="form-control" placeholder="Threshold Type">

Усс:

.form-control { box-sizing: border-box; } 

Как указал Павел в ответ: https://stackoverflow.com/questions/12195931/twitter-bootstrap-stop-input-field-extending-beyond-well

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