Bootstrap полноразмерный ввод текста внутри встроенной формы

144

Я изо всех сил пытаюсь создать текстовое поле, которое соответствует всей ширине области моего контейнера .

<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 ...

Killnine
источник
6
Я просто хочу подтвердить ваш вывод о проблеме с шаблоном MVC5 по умолчанию. Я просто потратил час на изучение этой проблемы и (ложно) проклятия на Bootstrap, прежде чем я нашел рабочий образец в jsfiddle, который побудил меня начать снова с чистой HTML-страницей, и он работал нормально. Только тогда я понял, что проблема с шаблоном VS2013, и наткнулся на этот пост. Бог знает, почему было принято решение о максимальной ширине, но это показывает, что вы должны быть осторожны при использовании кода других людей. Это также свидетельство возврата к основам, когда сталкиваешься с подобной проблемой.
Джейсон Снелдерс
2
Спасибо, также использую шаблон asp.net, но я уже установил максимальную ширину ввода равной none, но он все равно не занимает всю ширину, только если я установил ее на 100% вручную. Но затем кнопка справа от него опускается, и я хочу, чтобы она оставалась в той же строке.
Ронен Фестингер,
@Killnine Редактирование вашего вопроса решило мои головные боли. На самом деле это была проблема, спасибо, что отредактировали свой пост!
Flame_Phoenix
Я удалил этот бит CSS из моего файла site.css, и у меня все еще та же проблема. Любые идеи?
dave317 06
1
Дайууумн! Боролся с этим, и оказалось, что это проблема MVC! Как я глуп, что не проверяю свойства текстового поля css! Спасибо за указание на это!
Хаджат

Ответы:

103

Об этом говорится в документации начальной загрузки :

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

Ширина по умолчанию 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>
morten.c
источник
3
Смотрите мою правку выше. Я думаю, что Site.css в шаблоне ASP.NET, возможно, натолкнул меня на это. Однако это потрясающий ответ, который очень полезен для использования в будущем.
Killnine
5
группы ввода - способ сделать это. Лично я настраиваю стиль группы ввода так, чтобы он напоминал встроенную форму, когда мне не нужна кнопка рядом с полем ввода. Рабочая демонстрация с Bootstrap LESS: jsfiddle.net/silb3r/gwxc5c75
cfx
1
отлично! Я знаю, что вопрос относится к начальной загрузке, но если кто-то еще захочет добавить его на сайт без начальной загрузки (не с начальной загрузкой LESS;), я извлек соответствующие стили здесь: stackoverflow.com/a/27413796/1241736
Генри,
Ссылка Bootstrap в скрипте не работает. Вероятно, это указывает на новую версию Bootstrap, а Fiddle больше не работает.
Chloe
@Chloe Вы правы, скрипка использовала файл начальной загрузки css, которого больше не существует. Я только что обновил скрипку, она снова работает.
morten.c
33

посмотрите что-то вроде этого:

<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/

haxxxton
источник
10

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

ссылаясь на бутстрап:

Отдельные элементы управления формой автоматически получают глобальный стиль. Все текстовые элементы, и с .form-control устанавливаются на width: 100%; по умолчанию. Оберните ярлыки и элементы управления в .form-group для оптимального интервала.

kurdtpage
источник
По крайней мере, это не относится к встроенным формам. Таким образом, вам нужна группа ввода, чтобы заставить его быть 100%
user441058
3

Попробуйте что-то вроде ниже, чтобы достичь желаемого результата

input {
    max-width: 100%;
}
Навид Хан
источник
1

С 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>

Джон М
источник