Etykieta po lewej stronie zamiast nad polem wprowadzania

105

Chciałbym, aby etykiety nie znajdowały się nad polem wprowadzania, ale po lewej stronie. 

<form method="post" action="" role="form" class="form-inline">
  <div class="form-group">
    <label for="rg-from">Ab: </label>
    <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
  </div>
  <div class="form-group">
    <label for="rg-to">Bis: </label>
    <input type="text" id="rg-to" name="rg-to" value="" class="form-control">
  </div>
  <div class="form-group">
    <input type="button" value="Clear" class="btn btn-default btn-clear"> 
    <input type="submit" value="Los!" class="btn btn-primary">
  </div>
</form>

Ten kod daje mi:

Code_Result_Bootstrap_3_Label

Chciałbym mieć:

Desired_Result_Bootstrap_3_Label

css twitter-bootstrap-3 Stefan Vogt
źródło

Odpowiedzi:

86

Możesz użyć klasy form-inline dla każdej grupy formularzy :)

<form>                      
    <div class="form-group form-inline">                            
        <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
</form>
Martin Cisneros Capistrán
źródło
Dzięki. Po etykiecie miałem grupę wejściową div, która domyślnie przyjmuje szerokość: 100%. Potrzebne do zastąpienia tego div do 50%. Wtedy etykieta i grupa wejściowa (datapicker) zmieściłyby się w jednym wierszu. (Chciałbym, żeby było czystsze bez zastąpienia.)
Turbo
2
Nie, nie musisz go zastępować. Po prostu wypróbuj opcje siatki, takie jak „row” i „col- *”.
gvgramazio
1
To powinna być akceptowana odpowiedź. To pokazuje, że form-groupmoże dziedziczyć w form-inlinecelu tworzenia indywidualnych grup formularzy w tekście zamiast klasy nadrzędnej formularza.
Cowbert
Uwaga: w moim przypadku musiałem wprowadzić INPUT do DIV
AlexNikonov
56

Umieść na <label>zewnątrz form-group:

<form class="form-inline">
  <label for="rg-from">Ab: </label>
  <div class="form-group">
    <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
  </div>
  <!-- rest of form -->
</form>
candu
źródło
śmieszne, to działa, ale dokumentacja bootstrapa tego nie pokazuje. Pokazuje wytwórnię w formie grupy
steveareeno
14

Dokumentacja Bootstrap 3 mówi o tym w zakładce dokumentacji CSS w sekcji „Wymaga niestandardowych szerokości”, która stwierdza:

Wejścia, zaznaczenia i pola tekstowe mają domyślnie 100% szerokości w Bootstrap. Aby użyć formularza wbudowanego, musisz ustawić szerokość w kontrolkach formularza używanych w.

Jeśli używasz przeglądarki i narzędzi Firebug lub Chrome do tłumienia lub zmniejszania stylu „szerokości”, powinieneś zobaczyć, jak chcesz. Oczywiście możesz następnie utworzyć odpowiedni CSS, aby rozwiązać problem.

Jednak wydaje mi się dziwne, że w ogóle muszę to zrobić. Nie mogłem się powstrzymać od poczucia, że ​​ta manipulacja była irytująca i na dłuższą metę podatna na błędy. Ostatecznie użyłem atrapy klasy i trochę JS do globalnego ustawienia wszystkich moich wejść inline. To była niewielka liczba przypadków, więc nie było to wielkim problemem.

Niemniej jednak chciałbym usłyszeć od kogoś, kto ma „właściwe” rozwiązanie i mógłby wyeliminować moją podkładkę / hack.

Mam nadzieję, że to pomoże i stanowi dowód na to, że nie zepsułeś uszczelki wszystkim osobom, które zignorowały Twoją prośbę jako problem Bootstrap 3.

corporatedrone
źródło
2
co powiesz na, powiedzmy, zrobienie szerokości etykiet col-sm-2 - i wejść col-sm-10?
niico
13

Możesz stworzyć taki formularz, w którym kontrolka etykiety i formularza są ze sobą przy użyciu dwóch metod -

1. Wbudowany układ formularza

<form class="form-inline" role="form">
    <div class="form-group">
        <label for="inputEmail">Email</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="inputPassword">Password</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
    <button type="reset" class="btn btn-default">Reset</button>
    <button type="submit" class="btn btn-primary">Login</button>
</form>

2. Poziomy układ formularza

<form class="form-horizontal">
    <div class="row">
        <div class="col-sm-4">
            <div class="form-group">
                <label for="inputEmail" class="control-label col-xs-3">Email</label>
                <div class="col-xs-9">
                    <input type="email" class="form-control" id="inputEmail" placeholder="Email">
                </div>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="form-group">
                <label for="inputPassword" class="control-label col-xs-3">Password</label>
                <div class="col-xs-9">
                    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <button type="reset" class="btn btn-default">Reset</button>
            <button type="submit" class="btn btn-primary">Login</button>
        </div>
    </div>
</form>

Możesz sprawdzić tę stronę, aby uzyskać więcej informacji i demonstrację na żywo - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php

Alex
źródło
Rozwiązanie 1 nie działa dla mnie. Etykieta nadal nad kontrolką wejścia. Rozwiązanie candu spełnia moje oczekiwania, ale czy jest to właściwe rozwiązanie?
Kit Fisto
8

Lubię to

PRÓBNY

HTML

<div class="row">
  <form class="form-inline">
    <fieldset>
      <label class="control-label"><strong>AB :</strong></label>
      <input type="text" class="input-mini" >
      <label class="control-label"><strong>BIS:</strong></label>
      <input type="text" class="input-mini" >
      <input type="button" value="Clear" class="btn btn-default btn-clear">
      <input type="submit" value="Los!" class="btn btn-primary">
    </fieldset>
  </form>
</div>
Falguni Panchal
źródło
4
To jest rozwiązanie dla Bootstrap v2.1.0, ale nie dla Bootstrap v3.0.0
Stefan Vogt
3
„Form-inline” istnieje również w Bootstrap 3 i myślę, że to jest klucz: +1
Per Quested Aronsson
7

Miałem ten sam problem, oto moje rozwiązanie:

<form method="post" class="form-inline form-horizontal" role="form">
        <label class="control-label col-sm-5" for="jbe"><i class="icon-envelope"></i> Email me things like this: </label>
        <div class="input-group col-sm-7">
            <input class="form-control" type="email" name="email" placeholder="[email protected]"/>
            <span class="input-group-btn">
                <button class="btn btn-primary" type="submit">Submit</button>
            </span>
        </div>
    </form>

tutaj jest Demo

Amir
źródło
5

Musisz wypłynąć na lewo wszystkie elementy w ten sposób:

.form-group,
.form-group label,
.form-group input { float:left; display:inline;   }

daj trochę marginesu na pożądane elementy:

 .form-group { margin-right:5px }

i ustaw etykietę na taką samą wysokość wiersza, jak wysokość pól:

.form-group label { line-height:--px; }
psd2htmldepot
źródło
5

Na podstawie istniejących odpowiedzi widać, że terminologia Bootstrap jest myląca. Jeśli spojrzysz na dokumentację bootstrap, zobaczysz, że klasa form-horizontal jest w rzeczywistości przeznaczona dla formularza z polami znajdującymi się poniżej siebie, tj. To, co większość ludzi pomyślałaby jako forma pionowa. Prawidłowa klasa dla formularza przechodzącego przez stronę to form-inline . Prawdopodobnie wprowadzili termin inline, ponieważ nadużywali już terminu „ horyzontalny” .

Na podstawie niektórych odpowiedzi tutaj widać, że niektórzy ludzie używają obu tych klas w jednej formie! Inni uważają, że potrzebują formy poziomej, kiedy faktycznie chcą formować w linii .

Proponuję zrobić to dokładnie tak, jak opisano w dokumentacji Bootstrap:

<form class="form-inline">
  <div class="form-group">
    <label for="nameId">Name</label>
    <input type="text" class="form-control" id="nameId" placeholder="Jane Doe">
  </div>
</form>

Który produkuje:

wprowadź opis obrazu tutaj

paulo62
źródło
7
Skopiuj i wklej swój kod, otrzymuję etykietę z nazwą nad wejściem tekstowym za pomocą Bootstrap 3.3.4.
Mike Covington
2

Możesz użyć tagu span wewnątrz etykiety

  <div class="form-group">
    <label for="rg-from">
      <span>Ab:</span> 
      <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
    </label>
  </div>
Vinorth
źródło
1

Udało mi się naprawić mój problem z. Wydaje się, że działa dobrze i oznacza, że ​​nie muszę ręcznie dodawać szerokości do wszystkich danych wejściowych.

.form-inline .form-group input {
 width: auto; 
}
Tom C
źródło
To nie jest sposób, w jaki powinieneś używać bootstrapa. Sugeruję, abyś zamiast tego używał klas zbudowanych dla swoich potrzeb, modyfikując istniejące.
gvgramazio
Tak, zgadzam się, napisałem to, kiedy byłem nowy na całej scenie Bootstrap.
Tom C
1

Jestem pewien, że już znalazłeś odpowiedź ... oto rozwiązanie, do którego wyprowadziłem.

To mój CSS.

.field, .actions {
    margin-bottom: 15px;
  }
  .field label {
    float: left;
    width: 30%;
    text-align: right;
    padding-right: 10px;
    margin: 5px 0px 5px 0px;
  }
  .field input {
    width: 70%;
    margin: 0px;
  }

A mój HTML ...

<h1>New customer</h1>
<div class="container form-center">
    <form accept-charset="UTF-8" action="/customers" class="new_customer" id="new_customer" method="post">
    <div style="margin:0;padding:0;display:inline"></div>

  <div class="field">
    <label for="customer_first_name">First name</label>
    <input class="form-control" id="customer_first_name" name="customer[first_name]" type="text" />
  </div>
  <div class="field">
    <label for="customer_last_name">Last name</label>
    <input class="form-control" id="customer_last_name" name="customer[last_name]" type="text" />
  </div>
  <div class="field">
    <label for="customer_addr1">Addr1</label>
    <input class="form-control" id="customer_addr1" name="customer[addr1]" type="text" />
  </div>
  <div class="field">
    <label for="customer_addr2">Addr2</label>
    <input class="form-control" id="customer_addr2" name="customer[addr2]" type="text" />
  </div>
  <div class="field">
    <label for="customer_city">City</label>
    <input class="form-control" id="customer_city" name="customer[city]" type="text" />
  </div>
  <div class="field">
    <label for="customer_pincode">Pincode</label>
    <input class="form-control" id="customer_pincode" name="customer[pincode]" type="text" />
  </div>
  <div class="field">
    <label for="customer_homephone">Homephone</label>
    <input class="form-control" id="customer_homephone" name="customer[homephone]" type="text" />
  </div>
  <div class="field">
    <label for="customer_mobile">Mobile</label>
    <input class="form-control" id="customer_mobile" name="customer[mobile]" type="text" />
  </div>
  <div class="actions">
    <input class="btn btn-primary btn-large btn-block" name="commit" type="submit" value="Create Customer" />
  </div>
</form>
</div>

Możesz zobaczyć działający przykład tutaj ... http://jsfiddle.net/s6Ujm/

PS: Ja też jestem początkującym, profesjonalni projektanci ... podzielcie się swoimi recenzjami.

Balaji
źródło
1

Myślę, że właśnie tego chcesz, z dokumentacji bootstrap „Forma pozioma 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ę .form-groups na zachowują się jak rzędy siatki, więc nie ma potrzeby używania rozszerzenia .row ". Więc:

<form class="form-horizontal" role="form">
<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
  <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
  <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
  <div class="col-sm-10">
    <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <div class="checkbox">
      <label>
        <input type="checkbox"> Remember me
      </label>
    </div>
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <button type="submit" class="btn btn-default">Sign in</button>
  </div>
</div>
</form>

Skrzypce: http://jsfiddle.net/beewayne/B9jj2/29/

BeeTee2
źródło
6
Twoje skrzypce 404'd
Mike Covington
0 
<div class="control-group">
   <label class="control-label" for="firstname">First Name</label>
   <div class="controls">
    <input type="text" id="firstname" name="firstname"/>
   </div>
</div>

Możemy również używać go po prostu jako

<label>First name:
    <input type="text" id="firstname" name="firstname"/>
</label>
user2349320
źródło
2
class = "grupa-kontrolna" nie istnieje w Boostrap V3
Stefan Vogt
0

Wygląda na to, że dodawanie style="width:inherit;"do danych wejściowych działa dobrze. jsfiddle demo

Bushibytes
źródło
0

Nie jest wymagany CSS. To powinno dobrze wyglądać na Twojej stronie. Możesz ustawić col-md-*według swoich potrzeb

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="row">
                            <div class="col-md-12">
                                <form class="form-inline" role="form">
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="inputEmail" class="col-sm-3">Email</label>
                                            <input type="email" class="form-control col-sm-7" id="inputEmail" placeholder="Email">
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="inputPassword" class="col-sm-3">Email</label>
                                            <input type="password" class="form-control col-sm-7" id="inputPassword" placeholder="Email">
                                        </div>
                                    </div>
                                    
                                    <button class="btn btn-primary">Button 1</button>
                                    &nbsp;&nbsp;
                                    <button class="btn btn-primary">Button 2</button>
                                </form>
                            </div>
                        </div>
Rozwiń fragment

Saroj Shrestha
źródło