Wprowadź szerokości w Bootstrap 3

154

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

http://jsfiddle.net/tX3ae/

<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>
cyberwombat
źródło
5
Po co używać bootstrap do zarządzania tymi szerokościami? Wydaje się, że nie jest w tym szczególnie dobry i wprowadza złożoność.
Eamon Nerbonne
1
Po co używać do tego bootstrap, @Eamon? Przychodzi mi na myśl responsywny projekt i dopasowanie do pozostałych elementów, które obsługuje bootstrap. A w każdym razie, cały punkt na pytanie, jak to zrobić bez wprowadzania złożoności.
ctb
@ctb: zwykły CSS radzi sobie dobrze z tego rodzaju problemami; nie ma potrzeby stosowania dodatkowej złożoności programu bootstrap.
Eamon Nerbonne
1
więc czekaj, czy udzielono odpowiedzi na to pytanie? 38 głosów za to dużo.
wieża
1
@rook - odpowiedź brzmi, że nie, nie ma wbudowanej funkcji, chociaż jest na ich liście dyskusyjnej. Jednak w miarę możliwości istnieje kilka dostępnych tutaj, dopóki / jeśli BS faktycznie to doda.
cyberwombat

Odpowiedzi:

95

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:

<div class="container">
    <h1>My form</h1>
    <p>How to make these input fields small and retain the layout.</p>
    <form role="form">
        <div class="row">
            <div class="form-group col-lg-1">
                <label for="code">Name</label>
                <input type="text" class="form-control" />
            </div>
        </div>

        <div class="row">
            <div class="form-group col-lg-1 ">
                <label for="code">Email</label>
                <input type="text" class="form-control input-normal" />
            </div>
        </div>
        <div class="row">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </form>
</div>

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:

IF SCREEN WIDTH < 'lg' (1200px by default)

   USE DEFAULT BLOCK BEHAVIOUR (width=100%)

ELSE

   APPLY 'col-lg-1' (~95px)

Aby uzyskać więcej informacji, zobacz system siatki Bootstrap 3 . Mam nadzieję, że było jasne, że inaczej daj mi znać, a ja rozwinę.

shadowf
źródło
tak, to właśnie umieściłem w moim komentarzu do @Skelly - jest otwarta kwestia w tej sprawie i zajmą się nią, gdy wszystko się uspokoi. Dodanie wiersza, a nie tego, czego szukam, ze względu na dodatkowe znaczniki, które są całkowicie niepotrzebne, jeśli utworzyli odpowiednie klasy - co zrobiłem. Utworzyłem .input1-12 z procentową szerokością i po prostu stosuję to do danych wejściowych - działa świetnie
cyberwombat
7
Nie czytałem zbyt wiele o tym poście, ale ... "Użyj predefiniowanych klas siatki Bootstrap, aby wyrównać etykiety i grupy kontrolek formularza w układzie poziomym, dodając .form-horizontal do formularza. Spowoduje to zmianę zachowania .form-groups jako wiersze siatki, więc nie ma potrzeby .row. "
dtc
@dtc To nie pomaga jednak zbytnio przy szerokościach wejściowych?
Jacques
@shadowf A co jeśli chcę, aby wejście było krótsze niż jego etykieta? Czy muszę wstawiać dane wejściowe do kolejnej pary elementów div?
PowerGamer
1
dzięki, że dla mnie działa. Swoją drogą jest dla mnie niedziela 22:00 :-) ponieważ jestem po drugiej stronie globu.
Ananda
70

W Bootstrap 3

Możesz po prostu utworzyć własny styl:

.form-control-inline {
    min-width: 0;
    width: auto;
    display: inline;
}

Następnie dodaj go do kontrolek formularza, takich jak:

<div class="controls">
    <select id="expirymonth" class="form-control form-control-inline">
        <option value="01">01 - January</option>
        <option value="02">02 - February</option>
        <option value="03">03 - March</option>
        <option value="12">12 - December</option>
    </select>
    <select id="expiryyear" class="form-control form-control-inline">
        <option value="2014">2014</option>
        <option value="2015">2015</option>
        <option value="2016">2016</option>
    </select>
</div>

W ten sposób nie musisz umieszczać dodatkowych znaczników układu w kodzie HTML.

George Filippakos
źródło
15
To zdecydowanie wygrywa w odpowiedziach. Jest czysty, wielokrotnego użytku i po prostu działa. W rzeczywistości powinien być domyślnie umieszczony w bootstrapie, ponieważ jest to bardzo powszechna irytacja. Bardzo rzadko chcesz mieć czyste formy blokowe.
baweaver
Wypróbowałem to rozwiązanie, ale nie zadziałało. Chciałem ograniczyć szerokość mojego pola, więc użyłem „width: 200px” w niestandardowym stylu, ale to nie zmieniło szerokości. Dopiero po ustawieniu „max-width: 200px” otrzymałem poprawny wynik.
paulo62
Kiedy tego użyję, szerokość nie zastąpi automatycznej szerokości klasy kontrolnej formularza.
johnny
1
Zgadzam się z komentarzami tutaj - faktycznie próbowałem tego przed spojrzeniem tutaj, nie wydaje się, aby nadpisywać domyślne ... nie jestem pewien, dlaczego niektóre niestandardowe style działają, a niektóre nie.
Wil,
1
Oto skrzypce pokazujące, jak to wygląda: jsfiddle.net/yd1ukk10
brandones
25

ASP.net MVC przejdź do Content- Site.css i usuń lub skomentuj ten wiersz:

input,
select,
textarea {
    /*max-width: 280px;*/
}
user2648846
źródło
Jeśli spojrzysz na skrzypce, zobaczysz, że OP chce, aby pola były mniejsze, a nie większe. Większy problem polega na tym, że jego witryna w ogóle nie odwołuje się do site.css.
Bmize729
Nie wiedziałem, że istnieje reguła CSS i doprowadzało mnie do szału, że moje określone szerokości wydawały się być ignorowane. Dziękuję Ci.
Michael S. Miller
10

Myślę, że musisz owinąć dane wejściowe wewnątrz a col-lg-4, a następnie wewnątrz form-groupi wszystko zostanie zawarte w form-horizontal..

    <form class="form form-horizontal">
         <div class="form-group">
           <div class="col-md-3">
            <label>Email</label>
            <input type="email" class="form-control" id="email" placeholder="email">
           </div>
         </div>
         ...
     </form>

Demo na Bootply - http://bootply.com/78156

EDYCJA: Z dokumentacji Bootstrap 3 ...

Wejścia, 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.

Więc inną opcją jest ustawienie określonej szerokości za pomocą CSS:

.form-control {
    width:100px;
}

Lub zastosuj col-sm-*do `form-group '.

Zim
źródło
6
Musisz dodać klasę wiersza do grupy form - odbyłem dyskusję z zespołem Bootstrap i dodali oni możliwość wprowadzenia określonej kontroli szerokości do swojej listy planowania. W międzyczasie musimy korzystać z pełnych siatek. Jeśli pójdziesz dalej i dodasz wiersz do klasy form-group i usuniesz klasę poziomą, zaznaczę tę odpowiedź. Oto roboczego skrzypce jsfiddle.net/tdUtX/2 i planowanie github.com/twbs/bootstrap/issues/9397
cyberwombat
1
+ @ Yashua - +1 świetny przykład. Działa to również z klasą input-group, która sprawiała mi kłopoty.
David Robbins
10

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:

<div class="container">
  <h1>My form</h1>
  <p>How to make these input fields small and retain the layout.</p>
  <div class="row">
    <form role="form" class="col-xs-3">

      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" name="name" >
      </div>

      <div class="form-group">
        <label for="email">Email</label>
        <input type="text" class="form-control" id="email" name="email">
      </div>

      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
</div>

http://jsfiddle.net/tX3ae/226/

Ced
źródło
1
nie działa na małych urządzeniach, ponieważ pole wejściowe staje się zbyt małe
FranBran
9
<div class="form-group col-lg-4">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>

Dodaj klasę do form.group, aby ograniczyć dane wejściowe

BetoCuevas
źródło
8
To naprawdę nie działa. Powoduje, że każdy kolejny element unosi się obok tego. Musisz dodać element div z wierszem klas w każdej grupie formularzy, co jest śmieszne.
cyberwombat
6

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.

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
    max-width: 280px;
}
Joe Schmucker
źródło
dzięki stary, cztery lata później to mnie uratowało
Rich
4

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

<form class="form-inline" action="" method="post" accept-charset="UTF-8">
    <div class="row">
        <div class="form-group col-xs-7" style="padding-right: 0;">
            <label class="sr-only" for="term">Search</label>
            <input type="text" class="form-control" style="width: 100% !important;" name="term" id="term" placeholder="Search..." autocomplete="off">
            <span class="help-block">0 results</span>
        </div>
        <div class="form-group col-xs-2">
            <button type="submit" name="search" class="btn btn-success" id="search">Search</button>
        </div>
    </div>
</form>

To było moje rozwiązanie. Trochę hacky hack, ale wykonał zadanie dla formularza wbudowanego.

mattauckland
źródło
4

Możesz dodać atrybut stylu lub możesz dodać definicję znacznika wejściowego w pliku css.

Opcja 1: dodanie atrybutu stylu

<input type="text" class="form-control" id="ex1" style="width: 100px;">


Opcja 2: definicja w css

input{
  width: 100px
}

Możesz zmienić 100 pikseli w trybie automatycznym

Mam nadzieję, że mógłbym pomóc.

DW_
źródło
3

W Bootstrap 3

Wszystkie tekstowe elementy <input>, <textarea> i <select> z .form-control mają ustawioną szerokość: 100%; domyślnie.

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.

José Antonio Postigo
źródło
3

Nie musisz rezygnować z prostego css :)

.short { max-width: 300px; }
<input type="text" class="form-control short" id="...">
Orzeł
źródło
1

Jeśli chcesz po prostu zmniejszyć lub zwiększyć szerokość elementów wejściowych Bootstrap według własnych upodobań, użyłbym max-widthw CSS.

Oto bardzo prosty przykład, który stworzyłem:

    <form style="max-width:500px">

    <div class="form-group"> 
    <input type="text" class="form-control" id="name" placeholder="Name">
    </div>

    <div class="form-group">
    <input type="email" class="form-control" id="email" placeholder="Email Address">
    </div>

    <div class="form-group">
    <textarea class="form-control" rows="5" placeholder="Message"></textarea>
    </div>   

    <button type="submit" class="btn btn-primary">Submit</button>
    </form>

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.

user3574492
źródło
0

Ja też zmagałem się z tym samym problemem i to jest moje rozwiązanie.

Źródło HTML

<div class="input_width">
    <input type="text" class="form-control input-lg" placeholder="sample">
</div>

Zakryj kod wejściowy inną klasą div

Źródło CSS

.input_width{
   width: 450px;
}

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.

Hyung Woo Kim
źródło
0

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

Bmize729
źródło
0

Dodaj i zdefiniuj terminy style=""do pola wejściowego, to najłatwiejszy sposób: Przykład:

<form>
    <div class="form-group">
        <label for="email">Email address:</label>
        <input type="email" class="form-control" id="email" style="width:200px;">
    </div>
    <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" style="width:200px">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>
Kingsley Asifor
źródło
0

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

<script async src="//jsfiddle.net/tX3ae/embed/"></script> 
Prasant nair
źródło
0

Bootstrap 3 Uzyskałem ładny, responsywny układ formularza, używając:

<div class="row">
    <div class="form-group  col-sm-4">
        <label for=""> Date</label>
        <input type="date" class="form-control" id="date" name="date" placeholder=" date">
    </div>

    <div class="form-group  col-sm-4">
        <label for="hours">Hours</label>
        <input type="" class="form-control" id="hours" name="hours" placeholder="Total hours">
    </div>
</div>
Ravi Ram
źródło