Zaktualizuj ponownie: zamykam to pytanie, wybierając najlepszą odpowiedź, aby ludzie nie mogli dodawać odpowiedzi bez prawdziwego zrozumienia pytania. W rzeczywistości nie ma sposobu, aby to zrobić z wbudowaną funkcjonalnością bez użycia siatki lub dodania dodatkowego CSS. Siatki nie działają dobrze, jeśli masz do czynienia z help-block
elementami, które muszą na przykład wykraczać poza krótkie dane wejściowe, ale są „wbudowane”. Jeśli jest to problem, polecam użycie dodatkowych klas css, które można znaleźć w dyskusji o BS3 tutaj . Teraz, gdy BS4 jest już dostępny, można użyć dołączonych stylów wymiarowania , aby sobie z tym poradzić, więc nie będzie to miało znaczenia przez dłuższy czas. Dziękuję wszystkim za dobry wkład w to popularne pytanie SO.
Aktualizacja: To pytanie pozostaje otwarte, ponieważ dotyczy wbudowanej funkcji w BS do zarządzania szerokością wejściową bez uciekania się do siatki (czasami trzeba nimi zarządzać niezależnie). Używam już niestandardowych klas do zarządzania tym, więc nie jest to instrukcja dotycząca podstawowego CSS. Zadanie znajduje się na liście dyskusyjnej funkcji BS i nie zostało jeszcze rozwiązane.
Pierwsze pytanie: ktoś wymyślił sposób zarządzania szerokością wejściową na BS 3? Obecnie używam niektórych niestandardowych klas, aby dodać tę funkcję, ale mogłem przegapić niektóre nieudokumentowane opcje.
Obecne dokumenty mówią, że należy używać .col-lg-x, ale to najwyraźniej nie działa, ponieważ można go zastosować tylko do elementu div kontenera, który następnie powoduje wszelkiego rodzaju problemy z układem / pływakiem.
Oto skrzypce. Dziwne jest to, że na skrzypcach nie mogę nawet zmienić rozmiaru grupy form.
<form role="form" class="row">
<div class="form-group col-lg-1">
<label for="code">Name</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-lg-1 ">
<label for="code">Email</label>
<input type="text" class="form-control input-normal">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
źródło
Odpowiedzi:
To, co chcesz zrobić, jest z pewnością osiągalne.
Chcesz zawinąć każdą „grupę” w rzędzie, a nie cały formularz jednym wierszem. Tutaj:
NOWE jsfiddle, które stworzyłem: NOWE jsfiddle
Zwróć uwagę, że w nowych skrzypcach dodałem również `` col-xs-5 '', więc możesz to zobaczyć również na mniejszych ekranach - ich usunięcie nie ma znaczenia. Pamiętaj jednak, że w swoich oryginalnych klasach używasz tylko 'col-lg-1'. Oznacza to, że jeśli szerokość ekranu jest mniejsza niż rozmiar zapytania o media „lg”, używane jest domyślne zachowanie blokowe. Zasadniczo stosując tylko „col-lg-1”, logika, którą stosujesz, jest następująca:
Aby uzyskać więcej informacji, zobacz system siatki Bootstrap 3 . Mam nadzieję, że było jasne, że inaczej daj mi znać, a ja rozwinę.
źródło
W Bootstrap 3
Możesz po prostu utworzyć własny styl:
Następnie dodaj go do kontrolek formularza, takich jak:
W ten sposób nie musisz umieszczać dodatkowych znaczników układu w kodzie HTML.
źródło
ASP.net MVC przejdź do Content- Site.css i usuń lub skomentuj ten wiersz:
źródło
Myślę, że musisz owinąć dane wejściowe wewnątrz a
col-lg-4
, a następnie wewnątrzform-group
i wszystko zostanie zawarte wform-horizontal
..Demo na Bootply - http://bootply.com/78156
EDYCJA: Z dokumentacji Bootstrap 3 ...
Więc inną opcją jest ustawienie określonej szerokości za pomocą CSS:
Lub zastosuj
col-sm-*
do `form-group '.źródło
Obecni doktorzy mówią, aby używać .col-xs-x, no lg. Potem próbuję na skrzypcach i wydaje się, że działa:
http://jsfiddle.net/tX3ae/225/
aby zachować układ, możesz zmienić miejsce umieszczenia „wiersza” klasy w następujący sposób:
http://jsfiddle.net/tX3ae/226/
źródło
Dodaj klasę do form.group, aby ograniczyć dane wejściowe
źródło
Jeśli używasz szablonu Master.Site w programie Visual Studio 15, projekt podstawowy ma „Site.css”, który Zastępuje szerokość pól formantów formularzy.
Nie udało mi się uzyskać szerszej szerokości moich pól tekstowych niż około 300 pikseli. Próbowałem WSZYSTKIEGO i nic nie działało. Okazało się, że przyczyną problemu jest ustawienie w witrynie Site.css.
Pozbądź się tego, a uzyskasz kontrolę nad szerokością pól.
źródło
Wiem, że to stary wątek, ale napotkałem ten sam problem z formularzem wbudowanym i żadna z powyższych opcji nie rozwiązała problemu. Więc poprawiłem mój formularz w wierszu w następujący sposób: -
To było moje rozwiązanie. Trochę hacky hack, ale wykonał zadanie dla formularza wbudowanego.
źródło
Możesz dodać atrybut stylu lub możesz dodać definicję znacznika wejściowego w pliku css.
Opcja 1: dodanie atrybutu stylu
Opcja 2: definicja w css
Możesz zmienić 100 pikseli w trybie automatycznym
Mam nadzieję, że mógłbym pomóc.
źródło
W Bootstrap 3
http://getbootstrap.com/css/#forms-example
Wygląda na to, że w niektórych przypadkach musimy ręcznie ustawić maksymalną szerokość, jaką chcemy dla danych wejściowych.
W każdym razie twój przykład działa. Po prostu sprawdź to na dużym ekranie, aby zobaczyć, jak nazwa i adres e-mail otrzymują 2/12 z (col-lg-1 + col-lg-1 i masz 12 kolumn). Ale jeśli masz mniejszy ekran (po prostu zmień rozmiar przeglądarki), dane wejściowe będą się rozszerzać do końca wiersza.
źródło
Nie musisz rezygnować z prostego css :)
źródło
Jeśli chcesz po prostu zmniejszyć lub zwiększyć szerokość elementów wejściowych Bootstrap według własnych upodobań, użyłbym
max-width
w CSS.Oto bardzo prosty przykład, który stworzyłem:
Ustawiłem maksymalną szerokość całego formularza na 500px. W ten sposób nie będziesz musiał używać żadnego systemu siatki Bootstrap, a także utrzyma responsywność formularza.
źródło
Ja też zmagałem się z tym samym problemem i to jest moje rozwiązanie.
Źródło HTML
Zakryj kod wejściowy inną klasą div
Źródło CSS
podaj dowolne ustawienie szerokości lub marginesu w zakrytej klasie div.
Szerokość wejściowa Bootstrapa jest zawsze domyślna jako 100%, więc szerokość jest zgodna z szerokością pokrycia.
To nie jest najlepszy sposób, ale najłatwiejsze i jedyne rozwiązanie, które rozwiązałem.
Mam nadzieję, że to pomogło.
źródło
Nie wiem, dlaczego wszyscy przeoczyli plik site.css w folderze Content. Spójrz na wiersz 22 w tym pliku, a zobaczysz ustawienia wejścia, którym chcesz sterować. Wygląda na to, że Twoja witryna nie odwołuje się do tego arkusza stylów.
Dodałem to:
input, select, textarea { max-width: 280px;}
do twoich skrzypiec i działa dobrze.
Nigdy nie należy aktualizować pliku bootstrap.css lub bootstrap.min.css. Spowoduje to niepowodzenie podczas aktualizacji bootstrap. Dlatego dołączono plik site.css. Tutaj możesz wprowadzać zmiany w witrynie, które nadal będą zapewniać responsywny projekt, którego szukasz.
Oto jak działa skrzypce
źródło
Dodaj i zdefiniuj terminy
style=""
do pola wejściowego, to najłatwiejszy sposób: Przykład:źródło
Bootstrap używa klasy „form-input” do kontrolowania atrybutów „pól wejściowych”. Po prostu dodaj własną klasę „form-input” z żądaną szerokością, obramowaniem, rozmiarem tekstu itp. W pliku css lub sekcji head.
(lub bezpośrednio dodaj kod wbudowany size = '5' w atrybutach wejściowych w sekcji treści).
źródło
Bootstrap 3 Uzyskałem ładny, responsywny układ formularza, używając:
źródło