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-12
div 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 ...
źródło
Odpowiedzi:
Dokumentacja bootstrap mówi o tym :
Domyślna szerokość 100%, jaką otrzymują wszystkie elementy formularza, gdy otrzymały klasę,
form-control
nie ma zastosowania, jeśli używaszform-inline
klasy w formularzu.Możesz rzucić okiem na plik bootstrap.css (lub .less, jak wolisz), w którym znajdziesz tę część:
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 ):
źródło
spójrz na coś takiego:
http://jsfiddle.net/n6c7v/1/
źródło
Jak stwierdzono w podobnym pytaniu , spróbuj usunąć wystąpienia
input-group
klasy i sprawdź, czy to pomoże.w odniesieniu do bootstrapa:
źródło
źródło
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.
źródło