Wprowadź szerokości w Bootstrap 3

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>

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

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.

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

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

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

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/

<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

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

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.

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.

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.

Nie musisz rezygnować z prostego css :)

.short { max-width: 300px; }
<input type="text" class="form-control short" id="...">

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.

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.

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

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>

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> 

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>