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

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



<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. Он содержал это в сайте.css:



input,

select,

textarea {

    max-width: 280px;

}


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

614   3  

3 ответов:

"загрузки" документы говорит об этом:

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

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

вы могли бы взглянуть на загрузчик.УСБ (или .меньше, что бы вы ни предпочитали) где вы найдете эту часть:

.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%;
    }

    [...]
  }
}

может быть, вам стоит взглянуть на input-groups, так как я думаю, что у них есть именно та разметка, которую вы хотите использовать (рабочая скрипка здесь):

<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>
78  
2018-06-12 17:42:21

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

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

26  
2014-04-01 03:56:05

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

ссылка на bootstrap:

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

8  
2017-05-23 15:02:59

Comments

    Ничего не найдено.
Click here to cancel reply.