Ширина ввода в Bootstrap 3

Обновление еще раз: я закрываю этот вопрос, выбирая верхний ответ, чтобы люди не добавляли ответы, не понимая вопроса. На самом деле нет способа сделать это с помощью встроенных функций без использования сетки или добавления дополнительных css. Сетки не работают хорошо, если вы имеете дело с элементами help-block которые должны выходить за frameworks короткого ввода, например, но они «встроены». Если это проблема, я рекомендую использовать дополнительные classы css, которые вы можете найти здесь в обсуждении BS3. Теперь, когда BS4 отсутствует, можно использовать включенные стили размера для управления этим, чтобы это не было актуальным в течение гораздо более длительного времени. Спасибо всем за хороший вклад в этот популярный вопрос SO.

Обновление: этот вопрос остается открытым, потому что речь идет о встроенных функциях в BS для управления шириной ввода, не прибегая к сетке (иногда их нужно управлять независимо). Я уже использую пользовательские classы для управления этим, поэтому это не практический подход к базовому css. Задача находится в списке обсуждений функций BS и еще предстоит решить.

Оригинальный вопрос: кто-нибудь выясняет способ управления шириной ввода на BS 3? В настоящее время я использую некоторые пользовательские classы для добавления этой функциональности, но я, возможно, пропустил некоторые не документированные параметры.

В текущих документах говорят, что использовать .col-lg-x, но это явно не работает, поскольку его можно применять только к контейнеру div, который затем вызывает всевозможные проблемы с макетом / поплавком.

Вот скрипка. Странно то, что на скрипке я даже не могу изменить форму группы.

http://jsfiddle.net/tX3ae/

 

То, что вы хотите сделать, конечно, достижимо.

То, что вы хотите, состоит в том, чтобы обернуть каждую «группу» в строку, а не всю форму только с одной строкой. Вот:

 

My form

How to make these input fields small and retain the layout.

НОВЫЙ jsfiddle, который я сделал: NEW jsfiddle

Обратите внимание, что в новой скрипке я также добавил «col-xs-5», чтобы вы могли видеть ее на небольших экранах тоже – удаление их не имеет значения. Но имейте в виду в своих оригинальных classах, вы используете только «col-lg-1». Это означает, что если ширина экрана меньше, чем размер медиаресурсов ‘lg’, то используется поведение блока по умолчанию. В основном, применяя только «col-lg-1», логика, которую вы используете, такова:

 IF SCREEN WIDTH < 'lg' (1200px by default) USE DEFAULT BLOCK BEHAVIOUR (width=100%) ELSE APPLY 'col-lg-1' (~95px) 

Для получения дополнительной информации см. Систему сетки Bootstrap 3 . Надеюсь, что я был ясен, иначе дайте мне знать, и я уточню.

В Bootstrap 3

Вы можете просто создать собственный стиль:

 .form-control-inline { min-width: 0; width: auto; display: inline; } 

Затем добавьте его, чтобы сформировать элементы управления так:

 

Таким образом, вам не нужно добавлять дополнительную разметку для макета в свой HTML.

ASP.net MVC перейдите на Content- Site.css и удалите или прокомментируйте эту строку:

 input, select, textarea { /*max-width: 280px;*/ } 

Я думаю, вам нужно обернуть входные данные внутри col-lg-4 , а затем внутри группы form-group и все это будет содержаться в form-horizontal .

  
...

Демо на Bootply – http://bootply.com/78156

EDIT: из Bootstrap 3 документа ..

Входы, выделения и текстовые поля по умолчанию в Bootstrap 100%. Чтобы использовать встроенную форму, вам нужно будет установить ширину элементов управления формы, используемых внутри.

Таким образом, еще один вариант – установить определенную ширину с помощью CSS:

 .form-control { width:100px; } 

Или, примените col-sm-* к `form-group ‘.

 

Добавьте class в группу form.group, чтобы ограничить входные данные

Текущие документы говорят использовать .col-xs-x, no lg. Затем я стараюсь играть и, похоже, работает:

http://jsfiddle.net/tX3ae/225/

чтобы сохранить макет, возможно, вы можете изменить, где вы кладете class «строка» следующим образом:

 

My form

How to make these input fields small and retain the layout.

http://jsfiddle.net/tX3ae/226/

Если вы используете шаблон Master.Site в Visual Studio 15, базовый проект имеет «Site.css», который ПЕРЕКРЫВАЕТ ширину полей управления формой.

Я не мог получить ширину моих текстовых полей, чтобы получить ширину примерно в 300 пикселей. Я пробовал ВСЕ, и ничего не получилось. Я обнаружил, что в Site.css есть параметр, который вызывает проблему.

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

 /* Set widths on the form inputs since otherwise they're 100% wide */ input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="select"] { max-width: 280px; } 

Я знаю, что это старый stream, но я столкнулся с той же проблемой со встроенной формой, и ни один из вышеперечисленных вариантов не решил проблему. Поэтому я исправил свою встроенную форму:

 
0 results

Это было мое решение. Немного взломанный хак, но сделал работу для встроенной формы.

В Bootstrap 3

Все текстовые элементы ,

http://getbootstrap.com/css/#forms-example

Кажется, в некоторых случаях мы должны вручную установить максимальную ширину для ввода.

Во всяком случае, ваш пример работает. Просто проверьте его на большом экране, чтобы вы могли видеть, что поля имени и электронной почты получают 2/12 из них (col-lg-1 + col-lg-1 и у вас есть 12 столбцов). Но если у вас меньше экрана (просто измените размер вашего браузера), входы будут расширяться до конца строки.

Вам не нужно бросать простые css 🙂

 .short { max-width: 300px; }  

Вы можете добавить атрибут стиля или добавить определение для тега ввода в файле css.

Вариант 1: добавление атрибута стиля

  

Вариант 2: определение в css

 input{ width: 100px } 

Вы можете изменить 100px в авто

Надеюсь, я смогу помочь.

Если вы хотите просто уменьшить или увеличить ширину входных элементов Bootstrap по своему вкусу, я бы использовал max-width в CSS.

Вот очень простой пример, который я создал:

  

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

Я также борюсь с той же проблемой, и это мое решение.

Источник HTML

 

Введите код ввода с другим classом div

Источник CSS

 .input_width{ width: 450px; } 

задайте настройку ширины или поля на закрытом classе div.

Ширина входного бутстрапа всегда равна 100%, поэтому ширина должна соответствовать ширине.

Это не лучший способ, но самое простое и единственное решение, которое я решил проблему.

Надеюсь, это помогло.

Bootstrap 3 Я получил хороший отзывчивый макет, используя следующее:

 

Я не знаю, почему все, похоже, не видят файл site.css в папке «Содержимое». Посмотрите на строку 22 в этом файле, и вы увидите настройки для ввода. Похоже, что ваш сайт не ссылается на эту таблицу стилей.

Я добавил:

input, select, textarea { max-width: 280px;}

на твою скрипку, и все работает отлично.

Никогда не следует обновлять bootstrap.css или bootstrap.min.css. Это приведет к сбою при обновлении бутстрапа. Вот почему файл site.css включен. Здесь вы можете вносить изменения в сайт, который все равно даст вам отзывчивый дизайн, который вы ищете.

Вот скрипка, в которой он работает

Добавьте и определите термины для style="" в поле ввода, это самый простой способ сделать это: Пример:

 

Bootstrap использует class «form-input» для управления атрибутами «полей ввода». Просто добавьте свой собственный class «form-input» с требуемой шириной, границей, размером текста и т. Д. В ваш файл css или раздел главы.

(или, иначе, добавьте встроенный код size = ‘5’ во входные атрибуты в разделе body.)

  
  • Как обосновать navbar-nav в Bootstrap 3
  • Лучший способ представить сетку или таблицу в AngularJS с помощью Bootstrap 3?
  • Как изменить начальный цвет начальной загрузки?
  • Twitter bootstrap 3 - создать пользовательский глификон и добавить к шрифту "шрифт"
  • Проблемы с Typeahead с Bootstrap 3.0 RC1
  • Загрузочный текст 3 Выровняйте текст до нижней части Div
  • Сохранять раскрывающееся окно Bootstrap при нажатии
  • Кнопка Аккордеон Bootstrap для переключения "data-parent" не работает
  • Где находится модуль ввода текста в Bootstrap 3 RC 1?
  • Bootstrap 3 - Используйте более 12 столбцов подряд
  • twitter bootstrap 3 минимальная версия jquery
  • Interesting Posts

    Кто изменил мои функциональные клавиши? Функции F7 и F8 были перезаписаны в Windows 7

    Как увеличить память JVM?

    Почему я должен использовать exFAT через NTFS на съемных носителях?

    Как свести к минимуму размер пакета webpack?

    Проверьте, находится ли точка в пространственном объекте, который состоит из нескольких полигонов / отверстий

    Могу ли я автоматически подключиться к самой сильной сети Wi-Fi под Windows 7?

    Получено недостаточно сообщений о привилегиях в CMD при входе в систему как администратор

    Как выполнить процесс на удаленном компьютере, в C #

    В чем смысл + в регулярном выражении?

    Минимизировать размер файлов Microsoft Word

    Ассоциированное расширение файла с помощью приложения

    Где эквивалент PowerPoint для нормального. Word?

    Сравните две таблицы и получите отсутствующие записи

    Переупорядочить элементы панели задач Windows 7

    Как указать уровень сжатия при использовании tar -zcvf?

    Давайте будем гением компьютера.