Wprowadzanie tekstu o pełnej szerokości za pomocą ładowania początkowego w formularzu wbudowanym

Staram się utworzyć pole tekstowe, które pasuje do całej szerokości mojego obszaru kontenera .

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

Kiedy robię to powyżej, dwa elementy formularza znajdują się w jednej linii, tak jak się spodziewam, ale w najlepszym przypadku nie zajmują więcej niż kilka kolumn. Najechanie kursorem na element col-md-12div w firebug pokazuje, że zajmuje on oczekiwaną pełną szerokość. Wydaje się, że to tylko wpisywanie tekstu nie jest wypełnione. Próbowałem nawet dodać wartość szerokości w wierszu, ale to niczego nie zmieniło. Wiem, że to powinno być proste, po prostu czuć się teraz naprawdę głupio.

Oto skrzypce: http://jsfiddle.net/52VtD/4119/embedded/result/

EDYTOWAĆ:

Wybrana odpowiedź jest wyczerpująca pod każdym względem i stanowi wspaniałą pomoc. Właśnie tego użyłem. Jednak myślę, że moim początkowym problemem był w rzeczywistości problem z domyślnym szablonem MVC5 w programie Visual Studio 2013. Zawierał to w Site.css:

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

Oczywiście blokowało to odpowiednie rozszerzanie wprowadzania tekstu ... Uczciwe ostrzeżenie dla przyszłych użytkowników szablonów ASP.NET ...

Dokumentacja bootstrap mówi o tym :

Wymaga niestandardowych szerokości Dane wejściowe, zaznaczenia i obszary tekstowe mają domyślnie 100% szerokości w Bootstrap. Aby użyć formularza wbudowanego, musisz ustawić szerokość w kontrolkach formularza używanych w.

Domyślna szerokość 100%, jaką otrzymują wszystkie elementy formularza, gdy otrzymały klasę, form-controlnie ma zastosowania, jeśli używasz form-inlineklasy w formularzu.

Możesz rzucić okiem na plik bootstrap.css (lub .less, jak wolisz), w którym znajdziesz tę część:

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

    [...]
  }
}

Może powinieneś przyjrzeć się grupom danych wejściowych , ponieważ wydaje mi się, że mają one dokładnie taki znacznik, którego chcesz użyć ( tutaj działają skrzypce ):

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

spójrz na coś takiego:

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

Jak stwierdzono w podobnym pytaniu , spróbuj usunąć wystąpienia input-groupklasy i sprawdź, czy to pomoże.

w odniesieniu do bootstrapa:

Poszczególne kontrolki formularzy automatycznie otrzymują globalne style. Wszystkie elementy tekstowe, i z .form-control mają ustawioną szerokość: 100%; domyślnie. Owijaj etykiety i kontrolki w .form-group, aby uzyskać optymalne odstępy.

Spróbuj czegoś takiego jak poniżej, aby osiągnąć pożądany efekt

input {
    max-width: 100%;
}

W przypadku Bootstrap> 4.1 jest to tylko przypadek użycia klas narzędziowych Flexbox. Po prostu umieść kontener typu flexbox w swojej kolumnie, a następnie nadaj wszystkim elementom w nim klasę „flex-fill”. Podobnie jak w przypadku formularzy wbudowanych, musisz samodzielnie ustawić marginesy / dopełnienie elementów.

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