Label di sisi kiri, bukan di atas kolom input

Saya ingin label tidak berada di atas kolom input, tetapi di sisi kiri.

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

Kode ini memberi saya:

Saya ingin memiliki:

Anda dapat menggunakan kelas form-inline untuk setiap form-group :)

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

Letakkan bagian <label>luar 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>

Dokumentasi Bootstrap 3 membicarakan hal ini di tab dokumentasi CSS di bagian berlabel "Memerlukan lebar khusus", yang menyatakan:

Input, selects, dan textarea memiliki lebar 100% secara default di Bootstrap. Untuk menggunakan formulir sebaris, Anda harus menyetel lebar pada kontrol formulir yang digunakan di dalamnya.

Jika Anda menggunakan browser dan Firebug atau alat Chrome untuk menyembunyikan atau mengurangi gaya "lebar", Anda akan melihat semuanya berbaris sesuai keinginan Anda. Jelas Anda kemudian dapat membuat CSS yang sesuai untuk memperbaiki masalah tersebut.

Namun, saya merasa aneh bahwa saya perlu melakukan ini sama sekali. Saya tidak bisa tidak merasa manipulasi ini mengganggu dan dalam jangka panjang, rawan kesalahan. Pada akhirnya, saya menggunakan kelas dummy dan beberapa JS untuk mendorong semua input inline saya secara global. Jumlah kasusnya kecil, jadi tidak terlalu mengkhawatirkan.

Meskipun demikian, saya juga ingin mendengar dari seseorang yang memiliki solusi yang "tepat", dan dapat menghilangkan shim / hack saya.

Semoga ini bisa membantu, dan menjadi pendukung bagi Anda untuk tidak merusak semua orang yang mengabaikan permintaan Anda sebagai perhatian Bootstrap 3.

Anda dapat membuat formulir seperti itu di mana label dan kontrol formulir bersisian menggunakan dua metode -

1. Tata letak formulir sebaris

<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. Tata Letak Bentuk Horizontal

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

Anda dapat melihat halaman ini untuk informasi lebih lanjut dan demo langsung - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php

Seperti ini

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>

Saya memiliki masalah yang sama, inilah solusi saya:

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

ini dia Demo-nya

Anda harus mengapung meninggalkan semua elemen seperti ini:

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

berikan beberapa margin ke elemen yang diinginkan:

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

dan atur label dengan tinggi baris yang sama dengan tinggi bidang:

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

Anda dapat melihat dari jawaban yang ada bahwa terminologi Bootstrap membingungkan. Jika Anda melihat pada dokumentasi bootstrap, Anda melihat bahwa kelas formulir-horizontal sebenarnya untuk formulir dengan bidang di bawah satu sama lain, yaitu apa yang kebanyakan orang anggap sebagai bentuk vertikal. Kelas yang benar untuk formulir yang melintasi halaman adalah formulir-sebaris . Mereka mungkin memperkenalkan istilah sebaris karena mereka telah menyalahgunakan istilah horizontal .

Anda lihat dari beberapa jawaban di sini bahwa beberapa orang menggunakan kedua kelas ini dalam satu bentuk! Yang lain berpikir bahwa mereka membutuhkan bentuk-horizontal ketika mereka benar-benar menginginkan bentuk-sebaris .

Saya menyarankan untuk melakukannya persis seperti yang dijelaskan dalam dokumentasi 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>

Yang menghasilkan:

Anda dapat menggunakan tag span di dalam label

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

Saya berhasil memperbaiki masalah saya dengan. Tampaknya berfungsi dengan baik dan berarti saya tidak perlu menambahkan lebar ke semua input saya secara manual.

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

Saya yakin Anda pasti sudah menemukan jawaban Anda ... berikut adalah solusi yang saya peroleh.

Itu CSS saya.

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

Dan HTML saya ...

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

Anda dapat melihat contoh kerja di sini ... http://jsfiddle.net/s6Ujm/

PS: Saya juga pemula, desainer profesional ... silakan bagikan ulasan Anda.

Saya rasa inilah yang Anda inginkan, dari dokumentasi bootstrap "Bentuk horizontal Gunakan kelas kisi yang telah ditentukan sebelumnya dari Bootstrap untuk menyelaraskan label dan grup kontrol formulir dalam tata letak horizontal dengan menambahkan .form-horizontal ke formulir. Melakukannya akan mengubah .form-groups menjadi berperilaku sebagai baris kisi, jadi tidak perlu .row ". Begitu:

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

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

Juga kita bisa menggunakannya Cukup sebagai

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

Tampaknya menambahkan style="width:inherit;"input berfungsi dengan baik. jsfiddle demo

Tidak ada CSS yang dibutuhkan. Ini akan terlihat bagus di halaman Anda. Anda dapat mengatur col-md-*sesuai kebutuhan Anda

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