Обновить снова.. Я закрываю этот вопрос, выбирая верхний ответ, чтобы люди не добавляли ответы, не понимая вопроса. На самом деле нет способа сделать это с помощью встроенных функций без использования сетки или добавления дополнительных css. Сетки не работают хорошо, если вы имеете дело с элементами help-block
, которые должны выходить за рамки короткого ввода, например, но они являются "встроенными". Если это проблема, я рекомендую использовать дополнительные классы css, которые вы можете найти в обсуждении BS3 здесь. Теперь, когда BS4 отсутствует, можно использовать встроенные стили sizing для управления этим, поэтому это не будет иметь отношения к значительному времени. Спасибо всем за хороший вклад в этот популярный вопрос 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>
То, что вы хотите сделать, конечно же возможно.
То, что вы хотите, состоит в том, чтобы обернуть каждую "группу" в строку, а не всю форму только с одной строкой. Здесь:
<div class="container">
<h1>My form</h1>
<p>How to make these input fields small and retain the layout.</p>
<form role="form">
<div class="row">
<div class="form-group col-lg-1">
<label for="code">Name</label>
<input type="text" class="form-control" />
</div>
</div>
<div class="row">
<div class="form-group col-lg-1 ">
<label for="code">Email</label>
<input type="text" class="form-control input-normal" />
</div>
</div>
<div class="row">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</div>
НОВЫЙ jsfiddle, который я сделал: NEW jsfiddle
Обратите внимание, что в новой скрипте я также добавил "col-xs-5", чтобы вы могли видеть ее на небольших экранах тоже - удаление их не имеет значения. Но имейте в виду в своих оригинальных классах, вы используете только "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;
}
Затем добавьте его, чтобы сформировать элементы управления следующим образом:
<div class="controls">
<select id="expirymonth" class="form-control form-control-inline">
<option value="01">01 - January</option>
<option value="02">02 - February</option>
<option value="03">03 - March</option>
<option value="12">12 - December</option>
</select>
<select id="expiryyear" class="form-control form-control-inline">
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
</div>
Таким образом, вам не нужно добавлять дополнительную разметку для макета в свой HTML.
ASP.net MVC перейдите на Content- Site.css и удалите или прокомментируйте эту строку:
input,
select,
textarea {
/*max-width: 280px;*/
}
Я думаю, вам нужно обернуть входы внутри col-lg-4
, а затем внутри form-group
, и все это будет содержаться в form-horizontal
..
<form class="form form-horizontal">
<div class="form-group">
<div class="col-md-3">
<label>Email</label>
<input type="email" class="form-control" id="email" placeholder="email">
</div>
</div>
...
</form>
РЕДАКТИРОВАТЬ: Из бутстрапа 3 документа..
Входы, выборки и текстовые поля по умолчанию в пакете Bootstrap равны 100%. Чтобы использовать встроенную форму, вам нужно будет установить ширину элементов управления формы, используемых внутри.
Итак, еще один вариант - установить определенную ширину с помощью CSS:
.form-control {
width:100px;
}
Или примените col-sm-*
к `form-group '.
Текущие документы говорят использовать .col-xs-x, no lg. Затем я стараюсь играть и, похоже, работает:
http://jsfiddle.net/tX3ae/225/
чтобы сохранить макет, возможно, вы можете изменить, где вы кладете класс "строка" следующим образом:
<div class="container">
<h1>My form</h1>
<p>How to make these input fields small and retain the layout.</p>
<div class="row">
<form role="form" class="col-xs-3">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" >
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" name="email">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
<div class="form-group col-lg-4">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
Добавьте класс в форму .group, чтобы ограничить входы
Если вы используете шаблон 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;
}
Я знаю, что это старый поток, но я столкнулся с той же проблемой со встроенной формой, и ни один из вышеперечисленных вариантов не решил проблему. Поэтому я установил свою встроенную форму следующим образом: -
<form class="form-inline" action="" method="post" accept-charset="UTF-8">
<div class="row">
<div class="form-group col-xs-7" style="padding-right: 0;">
<label class="sr-only" for="term">Search</label>
<input type="text" class="form-control" style="width: 100% !important;" name="term" id="term" placeholder="Search..." autocomplete="off">
<span class="help-block">0 results</span>
</div>
<div class="form-group col-xs-2">
<button type="submit" name="search" class="btn btn-success" id="search">Search</button>
</div>
</div>
</form>
Это было мое решение. Бит хакерский взлом, но сделал работу для встроенной формы.
Вам не нужно бросать простой css:)
.short { max-width: 300px; }
<input type="text" class="form-control short" id="...">
В Bootstrap 3
Все текстовые <input> , <textarea> и <select> элементы с .form-control установлены на ширину: 100%; по умолчанию.
http://getbootstrap.com/css/#forms-example
Кажется, в некоторых случаях мы должны вручную установить максимальную ширину для ввода.
Во всяком случае, ваш пример работает. Просто проверьте его на большом экране, чтобы вы могли видеть, что поля имени и электронной почты получают 2/12 из них (col-lg-1 + col-lg-1 и у вас есть 12 столбцов). Но если у вас меньше экран (просто измените размер вашего браузера), входы будут расширяться до конца строки.
Вы можете добавить атрибут стиля или добавить определение для входного тега в файле css.
Вариант 1: добавление атрибута style
<input type="text" class="form-control" id="ex1" style="width: 100px;">
Вариант 2: определение в css
input{
width: 100px
}
Вы можете изменить 100px в auto
Надеюсь, что смогу помочь.
Если вы хотите просто уменьшить или увеличить ширину входных элементов Bootstrap по своему вкусу, я бы использовал max-width
в CSS.
Вот очень простой пример, который я создал:
<form style="max-width:500px">
<div class="form-group">
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="Email Address">
</div>
<div class="form-group">
<textarea class="form-control" rows="5" placeholder="Message"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Я установил максимальную ширину всей формы до 500 пикселей. Таким образом, вам не нужно будет использовать какую-либо систему сетки Bootstrap, и она также сохранит форму реагирования.
Bootstrap использует класс "form-input" для управления атрибутами "полей ввода". Просто добавьте свой собственный класс "form-input" с требуемой шириной, границей, размером текста и т.д. В ваш файл css или раздел главы.
(или иначе, добавьте встроенный код size = '5' во входные атрибуты в разделе body.)
<script async src="//jsfiddle.net/tX3ae/embed/"></script>
Добавьте и определите термины для style=""
в поле ввода, что самый простой способ сделать это:
Пример:
<form>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" style="width:200px;">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" style="width:200px">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Я не знаю, почему все, кажется, пропускают файл site.css в папке "Содержимое". Посмотрите на строку 22 в этом файле, и вы увидите настройки для ввода. Похоже, что ваш сайт не ссылается на эту таблицу стилей.
Я добавил следующее:
input, select, textarea { max-width: 280px;}
для вашей скрипки, и все работает отлично.
Вы никогда не должны обновлять bootstrap.css или bootstrap.min.css. Это приведет к сбою при обновлении бутстрапа. Вот почему файл site.css включен. Здесь вы можете вносить изменения в сайт, который все равно даст вам отзывчивый дизайн, который вы ищете.
Bootstrap 3 Я получил приятный отзывчивый макет, используя следующее:
<div class="row">
<div class="form-group col-sm-4">
<label for=""> Date</label>
<input type="date" class="form-control" id="date" name="date" placeholder=" date">
</div>
<div class="form-group col-sm-4">
<label for="hours">Hours</label>
<input type="" class="form-control" id="hours" name="hours" placeholder="Total hours">
</div>
</div>
Я тоже борюсь с той же проблемой, и это мое решение.
Источник HTML
<div class="input_width">
<input type="text" class="form-control input-lg" placeholder="sample">
</div>
Введите код ввода с другим классом div
Источник CSS
.input_width{
width: 450px;
}
укажите значение ширины или поля в закрытом классе div.
Ширина входного бутстрапа всегда по умолчанию равна 100%, поэтому ширина равна ширине.
Это не лучший способ, но самое простое и единственное решение, которое я решил проблему.
Надеюсь, что это помогло.