Giriş alanı yerine sol taraftaki etiket

Etiketleri giriş alanının üstünde değil sol tarafta olmasını istiyorum.

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

Bu kod bana şunu veriyor:

Sahip olmak isterdim:

Her form grubu için form-inline sınıfını kullanabilirsiniz :)

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

Put <label>dışında 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>

Bootstrap 3 belgeleri bununla ilgili olarak "Özel genişlikler gerektirir" etiketli bölümdeki CSS belgeleri sekmesinde bahseder.

Bootstrap'ta girdiler, seçimler ve metin alanları varsayılan olarak% 100 geniştir. Satır içi formu kullanmak için, içinde kullanılan form denetimlerine bir genişlik ayarlamanız gerekir.

Tarayıcınızı ve Firebug veya Chrome araçlarını "genişlik" stilini bastırmak veya azaltmak için kullanırsanız, nesnelerin istediğiniz şekilde sıralandığını görmelisiniz. Açıkçası, sorunu çözmek için uygun CSS'yi oluşturabilirsiniz.

Ancak, bunu yapmamın gerekmesi garip buluyorum. Yardım edemedim ama bu manipülasyonun hem can sıkıcı hem de uzun vadede hataya açık olduğunu hissettim. Sonuçta, tüm satır içi girdilerimi global olarak parlatmak için sahte bir sınıf ve bazı JS kullandım. Az sayıda vaka vardı, bu yüzden pek endişe verici değil.

Yine de, ben de "doğru" çözüme sahip olan ve benim shim / hack'imi ortadan kaldırabilecek birinden haber almayı çok isterim.

Umarım bu yardımcı olur ve bir Bootstrap 3 endişesi olarak isteğinizi görmezden gelen tüm insanlara conta patlatmadığınız için size destek olur.

Etiket ve form kontrolünün iki yöntemi kullanarak yan yana olduğu böyle bir form oluşturabilirsiniz -

1. Satır içi form düzeni

<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. Yatay Form Düzeni

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

Daha fazla bilgi ve canlı demo için bu sayfaya göz atabilirsiniz - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php

Bunun gibi

DEMO

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>

Aynı sorunu yaşadım, işte çözümüm:

<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="your.email@example.com"/>
            <span class="input-group-btn">
                <button class="btn btn-primary" type="submit">Submit</button>
            </span>
        </div>
    </form>

işte Demo

Tüm unsurları şu şekilde bırakmalısınız:

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

istenen öğelere biraz marj verin:

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

ve etiketi alanların yüksekliğiyle aynı satır yüksekliğine ayarlayın:

.form-group label { line-height:--px; }

Mevcut cevaplardan Bootstrap'in terminolojisinin kafa karıştırıcı olduğunu görebilirsiniz. Önyükleme belgelerine bakarsanız, yatay form sınıfının aslında birbirinin altında alanlar olan bir form için olduğunu görürsünüz , yani çoğu insan dikey form olarak düşünür. Sayfadan geçen bir form için doğru sınıf form-inline'dır . Muhtemelen terimini satır içi olarak tanıttılar çünkü yatay terimini zaten kötüye kullanmışlardı .

Buradaki bazı cevaplardan, bazı insanların bu iki sınıfı tek bir biçimde kullandığını görüyorsunuz! Diğerleri, aslında form-inline istediklerinde form- yatay ihtiyaçları olduğunu düşünürler .

Bunu tam olarak Bootstrap belgelerinde açıklandığı gibi yapmanızı öneririm:

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

Hangi üretir:

Etiketin içinde bir span etiketi kullanabilirsiniz

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

İle sorunumu çözmeyi başardım. İyi çalışıyor gibi görünüyor ve tüm girişlerime manuel olarak genişlik eklemek zorunda olmadığım anlamına geliyor.

.form-inline .form-group input {
 width: auto; 
}

Eminim cevabınızı zaten bulmuşsunuzdur ... işte bulduğum çözüm.

Bu benim CSS'm.

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

Ve benim HTML’im ...

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

Çalışma örneğini burada görebilirsiniz ... http://jsfiddle.net/s6Ujm/

Not: Ben de acemiyim, profesyonel tasarımcılar ... yorumlarınızı paylaşmaktan çekinmeyin.

Bence bu, önyükleme belgelerinden "Yatay form" Forma .form-horizontal ekleyerek etiketleri ve form denetimi gruplarını yatay bir düzende hizalamak için Bootstrap'in önceden tanımlanmış ızgara sınıflarını kullanın. Bunu yapmak, .form-groups olarak değiştirir. ızgara satırları gibi davranır, bu nedenle .row'a gerek yoktur ". Yani:

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

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

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

Ayrıca basitçe şu şekilde kullanabiliriz:

<label>First name:
    <input type="text" id="firstname" name="firstname"/>
</label>

style="width:inherit;"Girişlere eklemek iyi çalışıyor gibi görünüyor . jsfiddle demosu

CSS gerekmez. Bu, sayfanızda iyi görünmelidir. col-md-*İhtiyaçlarınıza göre ayarlayabilirsiniz

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