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

138

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

Killnine
źródło
6
Chcę tylko poprzeć twoje odkrycie problemu z domyślnym szablonem MVC5. Po prostu spędziłem godzinę na badaniu tego problemu i (fałszywie) przeklinając w Bootstrap, zanim znalazłem działającą próbkę w jsfiddle, która skłoniła mnie do ponownego rozpoczęcia z czystą stroną HTML i działało dobrze. Dopiero wtedy doszedłem do wniosku, że wystąpił problem z szablonem VS2013 i natknąłem się na ten post. Bóg wie, dlaczego zdecydowano się na maksymalną szerokość, ale pokazuje, że musisz być ostrożny, używając kodu innych osób. Jest to również świadectwo powrotu do podstaw, gdy utknąłem z takim problemem.
Jason Snelders
2
Dzięki, również używam szablonu asp.net, ale już ustawiłem max-width of input na none, ale nadal nie zajmuje całej szerokości, tylko jeśli ustawię ją na 100% ręcznie. Ale potem przycisk po prawej stronie opada i chcę, żeby pozostał w tej samej linii.
Ronen Festinger
@Killnine Zmiana w Twoim pytaniu rozwiązała mój ból głowy. W rzeczywistości był to problem, dziękuję za edytowanie swojego posta!
Flame_Phoenix,
Usunąłem ten fragment CSS z mojego pliku site.css i nadal mam ten sam problem. Jakieś pomysły?
dave317,
1
Dayuuumn! Walczyłem z tym i okazuje się, że jest to problem MVC! Jaki jestem głupi, że nie sprawdzałem właściwości CSS pola tekstowego! Dzięki za wskazanie tego!
Hajjat

Odpowiedzi:

99

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>
morten.c
źródło
3
Zobacz moją edycję powyżej. Myślę, że Site.css w szablonie ASP.NET mógł mnie złapać na tym. Jest to jednak wspaniała odpowiedź i bardzo pomocna w przyszłości.
Killnine
5
grupy wejściowe są drogą do tego. Osobiście dostosowuję styl grupy danych wejściowych, aby przypominał formularz wbudowany, gdy nie chcę, aby przycisk znajdował się bezpośrednio obok danych wejściowych. Działające demo z Bootstrap LESS zawiera: jsfiddle.net/silb3r/gwxc5c75
cfx
1
miły! Wiem, że pytanie jest specyficzne dla bootstrapa, ale jeśli ktokolwiek inny chce wrzucić to na stronę bez bootstrapu (nie bootstrap LESS;), wyodrębniłem odpowiednie style tutaj: stackoverflow.com/a/27413796/1241736
henry
Łącze Bootstrap w Fiddle jest zepsute. Prawdopodobnie wskazuje na nową wersję Bootstrapa i Fiddle już nie działa.
Chloe,
@Chloe Masz rację, skrzypce używały pliku bootstrap css, który już nie istnieje. Właśnie zaktualizowałem skrzypce, znowu działa.
morten.c
32

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/

haxxxton
źródło
10

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.

kurdtpage
źródło
Per morten nie dotyczy to formularzy inline. Dlatego potrzebujesz grupy wejściowej, aby wymusić 100%
user441058
3

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

input {
    max-width: 100%;
}
Naveed Khan
źródło
1

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>

John M.
źródło