Я изо всех сил пытаюсь создать текстовое поле, которое соответствует всей ширине области моего контейнера .
<div class="row">
<div class="col-md-12">
<form class="form-inline" role="form">
<input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)">
<button type="submit" class="btn btn-lg">Search</button>
</form>
</div>
</div>
Когда я делаю это выше, два элемента формы находятся в строке, как я и ожидал, но в лучшем случае не занимают больше нескольких столбцов. При наведении col-md-12
курсора на div в firebug видно, что он занимает ожидаемую полную ширину. Кажется, что это просто ввод текста, который не заполняется. Я даже попытался добавить значение ширины в строке, но это ничего не изменило. Я знаю, что это должно быть просто, просто сейчас чувствую себя очень глупо.
Вот скрипка: http://jsfiddle.net/52VtD/4119/embedded/result/
РЕДАКТИРОВАТЬ:
Выбранный ответ исчерпывающий во всех смыслах и прекрасный подспорье. Это то, что я в итоге использовал. Однако я думаю, что моя первоначальная проблема была связана с шаблоном MVC5 по умолчанию в Visual Studio 2013. Он содержал это в Site.css:
input,
select,
textarea {
max-width: 280px;
}
Очевидно, это блокировало расширение текстового ввода от соответствующего расширения ... Справедливое предупреждение будущим пользователям шаблонов ASP.NET ...
источник
Ответы:
Об этом говорится в документации начальной загрузки :
Ширина по умолчанию 100%, которую получают все элементы формы при получении класса
form-control
, не применяется, если вы используетеform-inline
класс в своей форме.Вы можете взглянуть на bootstrap.css (или .less, как хотите), где вы найдете эту часть:
.form-inline { // Kick in the inline @media (min-width: @screen-sm-min) { // Inline-block all the things for "inline" .form-group { display: inline-block; margin-bottom: 0; vertical-align: middle; } // In navbar-form, allow folks to *not* use `.form-group` .form-control { display: inline-block; width: auto; // Prevent labels from stacking above inputs in `.form-group` vertical-align: middle; } // Input groups need that 100% width though .input-group > .form-control { width: 100%; } [...] } }
Возможно, вам стоит взглянуть на группы ввода , поскольку я думаю, что у них есть именно та разметка, которую вы хотите использовать ( здесь рабочая скрипка ):
<div class="row"> <div class="col-lg-12"> <div class="input-group input-group-lg"> <input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)"> <span class="input-group-btn"> <button class="btn btn-default btn-lg" type="submit">Search</button> </span> </div> </div> </div>
источник
посмотрите что-то вроде этого:
<form role="form"> <div class="row"> <div class="col-xs-12"> <div class="input-group input-group-lg"> <input type="text" class="form-control" /> <div class="input-group-btn"> <button type="submit" class="btn">Search</button> </div><!-- /btn-group --> </div><!-- /input-group --> </div><!-- /.col-xs-12 --> </div><!-- /.row --> </form>
http://jsfiddle.net/n6c7v/1/
источник
Как указано в аналогичном вопросе , попробуйте удалить экземпляры
input-group
класса и посмотрите, поможет ли это.ссылаясь на бутстрап:
источник
input { max-width: 100%; }
источник
С Bootstrap> 4.1 это просто случай использования служебных классов flexbox. Просто поместите контейнер flexbox в столбец, а затем присвойте всем элементам в нем класс «flex-fill». Как и в случае со встроенными формами, вам необходимо самостоятельно установить поля / отступы для элементов.
.prop-label { margin: .25rem 0 !important; } .prop-field { margin-left: 1rem; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-12"> <div class="d-flex"> <label class="flex-fill prop-label">Label:</label> <input type="text" class="flex-fill form-control prop-field"> </div> </div> </div>
источник