Повнорозмірне введення тексту в завантажувальному форматі в межах вбудованої форми

Я намагаюся створити текстове поле, яке відповідає всій ширині моєї контейнерної області.

<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діву в firebug показує, що вона займає очікувану повну ширину. Це, здається, не просто заповнення тексту. Я навіть спробував додати значення рядкової ширини, але це нічого не змінило. Я знаю, що це повинно бути просто, просто відчуваю себе справді німим.

Ось загадка: http://jsfiddle.net/52VtD/4119/embedded/result/

Редагувати:

Вибрана відповідь ґрунтовна у всіх відношеннях та чудова допомога. Це те, що я в кінцевому підсумку використав. Однак я думаю, що моя початкова проблема була насправді проблемою з шаблоном MVC5 за замовчуванням у Visual Studio 2013. Він містив це в Site.css:

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

Очевидно, це блокувало належне розширення введення тексту ... Справедливе попередження для майбутніх користувачів шаблону ASP.NET ...

Про це говорить документація завантажувача :

Потрібна власна ширина Введення, вибір і текстові області за замовчуванням у 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>

подивіться на щось подібне:

<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класу і подивіться, чи це допомагає.

перегляд завантажувальної програми:

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

Спробуйте щось подібне нижче, щоб досягти бажаного результату

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>