Обновление еще раз: я закрываю этот вопрос, выбирая верхний ответ, чтобы люди не могли добавлять ответы, не понимая вопроса. В действительности нет способа сделать это с помощью встроенной функциональности без использования сетки или добавления дополнительных CSS. Сетки не работают хорошо, если вы имеете дело с help-block
элементами, которые, например, должны выходить за рамки короткого ввода, но они встроены. Если это проблема, я рекомендую использовать дополнительные классы CSS, которые вы можете найти в обсуждении BS3 здесь . Теперь, когда вышла BS4, можно использовать включенные стили определения размеров для управления этим, так что это не будет актуальным в течение длительного времени. Спасибо всем за хороший вклад в этот популярный вопрос SO.
Обновление: этот вопрос остается открытым, потому что речь идет о встроенной функциональности в BS для управления шириной ввода без обращения к сетке (иногда ими нужно управлять независимо). Я уже использую пользовательские классы для управления этим, так что это не практическое руководство по базовым CSS. Задача находится в списке обсуждения функций BS и еще не решена.
Оригинальный вопрос: Кто-нибудь придумал, как управлять шириной ввода в BS 3? В настоящее время я использую некоторые пользовательские классы для добавления этой функциональности, но, возможно, я пропустил некоторые недокументированные параметры.
В текущих документах говорится, что нужно использовать .col-lg-x, но это явно не работает, поскольку его можно применять только к контейнеру div, что затем вызывает все виды проблем с макетом / плавающей точкой.
Вот скрипка Странно, что на скрипке я даже не могу изменить форму группы.
<form role="form" class="row">
<div class="form-group col-lg-1">
<label for="code">Name</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-lg-1 ">
<label for="code">Email</label>
<input type="text" class="form-control input-normal">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
источник
Ответы:
То, что вы хотите сделать, безусловно, достижимо.
То, что вы хотите, - это обернуть каждую «группу» в ряд, а не всю форму только одной строкой. Вот:
НОВЫЙ jsfiddle, который я сделал: НОВЫЙ jsfiddle
Обратите внимание, что в новом скрипте я также добавил 'col-xs-5', чтобы вы могли видеть его и на меньших экранах - удаление их не имеет значения. Но имейте в виду, что в ваших исходных классах вы используете только «col-lg-1». Это означает, что если ширина экрана меньше размера медиа-запроса 'lg', то используется поведение блока по умолчанию. В основном, применяя только col-lg-1, вы используете следующую логику:
Посмотрите систему сетки Bootstrap 3 для получения дополнительной информации. Я надеюсь, что я был ясен, иначе дайте мне знать, и я уточню.
источник
В Bootstrap 3
Вы можете просто создать собственный стиль:
Затем добавьте его, чтобы сформировать элементы управления следующим образом:
Таким образом, вам не нужно добавлять дополнительную разметку для макета в HTML.
источник
ASP.net MVC перейдите на Content- Site.css и удалите или прокомментируйте эту строку:
источник
Я думаю, что вам нужно обернуть входные данные внутри
col-lg-4
, а затем внутри,form-group
и все это содержится вform-horizontal
..Демо на Bootply - http://bootply.com/78156
РЕДАКТИРОВАТЬ: Из Bootstrap 3 документа ..
Так что другой вариант - установить конкретную ширину с помощью CSS:
Или примените
col-sm-*
к `form-group '.источник
Текущие документы говорят, чтобы использовать .col-xs-x, нет LG. Тогда я пытаюсь в скрипке, и это, кажется, работает:
http://jsfiddle.net/tX3ae/225/
чтобы сохранить макет, возможно, вы можете изменить место, где вы поместили класс "row", вот так:
http://jsfiddle.net/tX3ae/226/
источник
Добавьте класс в form.group, чтобы ограничить входные данные
источник
Если вы используете шаблон Master.Site в Visual Studio 15, у базового проекта есть «Site.css», который ОБЗОРЫ ширину полей элемента управления формы.
Я не мог получить ширину своих текстовых полей, чтобы быть шире, чем около 300 пикселей в ширину. Я пробовал ВСЕ и ничего не получалось. Я обнаружил, что в Site.css есть настройка, которая вызывала проблему.
Избавьтесь от этого, и вы сможете контролировать ширину вашего поля.
источник
Я знаю, что это старая ветка, но у меня возникла та же проблема со встроенной формой, и ни один из описанных выше вариантов не решил эту проблему. Поэтому я исправил свою встроенную форму следующим образом:
Это было мое решение. Немного хакерский хак, но сделал работу для встроенной формы.
источник
Вы можете добавить атрибут style или добавить определение тега input в файл css.
Вариант 1: добавление атрибута стиля
Вариант 2: определение в CSS
Вы можете изменить 100px в авто
Я надеюсь, что смогу помочь.
источник
В Bootstrap 3
http://getbootstrap.com/css/#forms-example
Кажется, в некоторых случаях мы должны вручную установить максимальную ширину, которую мы хотим для входов.
Во всяком случае, ваш пример работает. Просто проверьте его на большом экране, чтобы вы могли видеть, что поля имени и электронной почты получают 2/12 с (col-lg-1 + col-lg-1, и у вас есть 12 столбцов). Но если у вас экран меньшего размера (просто измените размер браузера), входные данные будут расширяться до конца строки.
источник
Вы не должны отказываться от простого CSS :)
источник
Если вы хотите просто уменьшить или увеличить ширину элементов ввода Bootstrap по своему вкусу, я бы использовал
max-width
в CSS.Вот очень простой пример, который я создал:
Я установил максимальную ширину всей формы на 500 пикселей. Таким образом, вам не нужно будет использовать какую-либо сеточную систему Bootstrap, и она также будет держать форму отзывчивой.
источник
Я тоже боролся с той же проблемой, и это мое решение.
HTML источник
Накройте входной код другим классом div
CSS источник
задайте любой параметр ширины или поля на покрытом классе div.
Ширина ввода Bootstrap всегда по умолчанию равна 100%, поэтому ширина соответствует ширине покрытия.
Это не лучший способ, но самое простое и единственное решение, которое я решил проблему.
Надеюсь, это помогло.
источник
Я не знаю, почему все, кажется, пропускают файл site.css в папке Content. Посмотрите на строку 22 в этом файле, и вы увидите настройки для ввода, которым нужно управлять. Похоже, что ваш сайт не ссылается на эту таблицу стилей.
Я добавил это:
input, select, textarea { max-width: 280px;}
к вашей скрипке, и это работает просто отлично.
Вы никогда не должны обновлять bootstrap.css или bootstrap.min.css. Это приведет к сбою при обновлении начальной загрузки. Вот почему файл site.css включен. Здесь вы можете внести изменения в сайт, которые по-прежнему дадут вам адаптивный дизайн, который вы ищете.
Вот скрипка с ним работает
источник
Добавьте и определите термины для
style=""
поля ввода, это самый простой способ сделать это: Пример:источник
Bootstrap использует класс 'form-input' для управления атрибутами 'полей ввода'. Просто добавьте свой собственный класс 'form-input' с желаемой шириной, границей, размером текста и т. Д. В ваш файл CSS или раздел заголовка.
(или непосредственно добавьте встроенный код size = '5' во входные атрибуты в разделе body.)
источник
Bootstrap 3 Я получил хороший адаптивный макет формы, используя следующее:
источник