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

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

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

EDIT:

Выбранный ответ является основательным во всех отношениях и замечательной помощью. Это то, что я использовал. Однако я думаю, что моя первоначальная проблема была фактически проблемой с шаблоном MVC5 по умолчанию в Visual Studio 2013. Он содержал это в Site.css:

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

Очевидно, что это блокирование текстового ввода от правильного расширения... Яркое предупреждение для будущих пользователей шаблона ASP.NET...

Ответы

Ответ 1

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

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

Ширина по умолчанию 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>

Ответ 2

взгляните на что-то вроде этого:

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

Ответ 3

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

ссылаясь на загрузку:

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

Ответ 4

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

input {
    max-width: 100%;
}