Form inline di dalam form horizontal di twitter bootstrap?

200

Apa cara terbaik untuk merancang formulir yang terlihat seperti ini (lihat tautan di bawah) di bootstrap twitter tanpa kelas buatan sendiri?

Apakah mungkin untuk mengatur form-inline di dalam form-horizontal seperti contoh di bawah ini:

tangkapan layar tujuan UI

html forms twitter-bootstrap Frntz
sumber

Jawaban:

317

Jangan <form>tag sarang , itu tidak akan berhasil. Cukup gunakan kelas Bootstrap.

Bootstrap 3

<form class="form-horizontal" role="form">
    <div class="form-group">
      <label for="inputType" class="col-md-2 control-label">Type</label>
      <div class="col-md-3">
          <input type="text" class="form-control" id="inputType" placeholder="Type">
      </div>
    </div>
    <div class="form-group">
        <span class="col-md-2 control-label">Metadata</span>
        <div class="col-md-6">
            <div class="form-group row">
                <label for="inputKey" class="col-md-1 control-label">Key</label>
                <div class="col-md-2">
                    <input type="text" class="form-control" id="inputKey" placeholder="Key">
                </div>
                <label for="inputValue" class="col-md-1 control-label">Value</label>
                <div class="col-md-2">
                    <input type="text" class="form-control" id="inputValue" placeholder="Value">
                </div>
            </div>
        </div>
    </div>
</form>

Anda dapat mencapai perilaku itu dengan banyak cara, itu hanya sebuah contoh. Uji di bootply ini

Bootstrap 2

<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="inputType">Type</label>
        <div class="controls">
            <input type="text" id="inputType" placeholder="Type">
        </div>
    </div>
    <div class="control-group">
        <span class="control-label">Metadata</span>
        <div class="controls form-inline">
            <label for="inputKey">Key</label>
            <input type="text" class="input-small" placeholder="Key" id="inputKey">
            <label for="inputValue">Value</label>
            <input type="password" class="input-small" placeholder="Value" id="inputValue">
        </div>
    </div>
</form>

Perhatikan bahwa saya menggunakan .form-inlineuntuk mendapatkan penataan gaya yang tepat di dalam a .controls.
Anda dapat mengujinya di jsfiddle ini

albertedevigo
sumber
3
Anda juga bisa menambahkan kelas bentuk pada divs, dalam kasus saya, saya menggunakan kelas bentuk vertikal pada span6 div dan kelas bentuk horizontal pada span12 div
Iftah
3
Ini berfungsi untuk bootstrap2. Untuk bootstrap 3 kunjungi: stackoverflow.com/questions/18429121/…
Tomislav Muic
1
Di bootstrap 3, jika ada celah di bawah input, hapus "form-group". Ini menambah celah 15px di bagian bawah setiap div yang Anda gunakan.
darkzangel
Anda tidak perlu mencampur form-group dengan baris pada contoh Key + Value. @ rap-2-h: Anda dapat menyalin tempel kode contoh dan klik jalankan.
Sebastian
Ini berfungsi tetapi saya dapat menyederhanakannya dalam versi Bootstrap 3 saat ini ... Tampaknya kunci untuk solusi ini hanya untuk meletakkan kontrol input di dalam div, jika tidak tata letak kotak col-xx tidak berfungsi. Itu tidak perlu untuk bersarang bentuk-kelompok, induk col-xx- # dapat berbagi div yang sama dan tidak perlu untuk kelas "baris" karena bentuk induk sudah bentuk-horizontal (100%).
Tony Wall
92

Untuk bootstrap 3 contoh di atas berfungsi tetapi terlalu rumit, daripada menggunakan formulir-kelompok menggunakan form-inline untuk bidang yang Anda inginkan sebaris.

Misalnya:

<div class="form-group">
     <label>CVV</label>
     <input type="text" size="4" class="form-control" />
</div>

<div class="form-inline">
      <label>Expiration (MM/YYYY)</label><br>
      <input type="text" size="2" class="form-control" /> / <input type="text" size="4" class="form-control" />
</div>
Ryan Knell
sumber
Ini mungkin tidak bekerja untuk Anda karena kelas kontrol-bentuk yang menetapkan "display: block". Jika Anda menimpanya menjadi "display: inline-block" itu akan berfungsi.
Cédric Guillemette
1
Ini tidak bekerja. Coba lakukan apa yang ditanyakan, ini tidak mungkin dengan formulir-inline.
Sebastian
Satu-satunya masalah dengan ini adalah sub-area tidak diperluas ke lebar penuh dan setiap upaya untuk menggunakan ukuran grid akan tergencet relatif terhadap lebar konten minimum yang diperlukan. Solusi lain lebih baik hanya tanpa begitu banyak divs (lihat komentar saya di sana).
Tony Wall
3
Anda harus membungkus semua grup formulir dalam kelas form-inline
ymakux
jsfiddle.net/9637fywb Ini tampaknya tidak bertindak seperti yang diinginkan - menggunakan CDN bootstrap terbaru saat ini (3.3.5). Contoh ini juga tidak memperhitungkan dua label di dalam bagian "sebaris". Mungkin biola tersebut tidak memiliki pembungkus atau sejenisnya, tetapi sepertinya itu harus dimasukkan dalam jawaban, jika demikian.
emragins
14

Ini menggunakan twitter bootstrap 3.x dengan satu kelas css untuk mendapatkan label untuk duduk di atas input. Inilah tautan biola , pastikan untuk memperluas panel hasil cukup lebar untuk melihat efeknya.

HTML:

  <div class="row myform">
     <div class="col-md-12">
        <form name="myform" role="form" novalidate>
           <div class="form-group">
              <label class="control-label" for="fullName">Address Line</label>
              <input required type="text" name="addr" id="addr" class="form-control" placeholder="Address"/>
           </div>

           <div class="form-inline">
              <div class="form-group">
                 <label>State</label>
                 <input required type="text" name="state" id="state" class="form-control" placeholder="State"/>
              </div>

              <div class="form-group">
                 <label>ZIP</label>
                 <input required type="text" name="zip" id="zip" class="form-control" placeholder="Zip"/>
              </div>
           </div>

           <div class="form-group">
              <label class="control-label" for="country">Country</label>
              <input required type="text" name="country" id="country" class="form-control" placeholder="country"/>
           </div>
        </form>
     </div>
  </div>

CSS:

.myform input.form-control {
   display: block;  /* allows labels to sit on input when inline */
   margin-bottom: 15px; /* gives padding to bottom of inline inputs */
}
Asam baterai
sumber
2

Karena bootstrap 4 gunakan div class = "form-row" dalam kombinasi dengan div class = "form-group col-X". X adalah lebar yang Anda butuhkan. Anda akan mendapatkan kolom sebaris yang bagus. Lihat biola .

<form class="form-horizontal" name="FORMNAME" method="post" action="ACTION" enctype="multipart/form-data">
    <div class="form-group">
        <label class="control-label col-sm-2" for="naam">Naam:&nbsp;*</label>
        <div class="col-sm-10">
            <input type="text" require class="form-control" id="naam" name="Naam" placeholder="Uw naam" value="{--NAAM--}" >
            <div id="naamx" class="form-error form-hidden">Wat is uw naam?</div>
        </div>
    </div>

    <div class="form-row">

        <div class="form-group col-5">
            <label class="control-label col-sm-4" for="telefoon">Telefoon:&nbsp;*</label>
            <div class="col-sm-12">
                <input type="tel" require class="form-control" id="telefoon" name="Telefoon" placeholder="Telefoon nummer" value="{--TELEFOON--}" >
                <div id="telefoonx" class="form-error form-hidden">Wat is uw telefoonnummer?</div>
            </div>
        </div>

        <div class="form-group col-5">
            <label class="control-label col-sm-4" for="email">E-mail: </label>
            <div class="col-sm-12">
                <input type="email" require class="form-control" id="email" name="E-mail" placeholder="E-mail adres" value="{--E-MAIL--}" >
                <div id="emailx" class="form-error form-hidden">Wat is uw e-mail adres?</div>
                    </div>
                </div>

        </div>

    <div class="form-group">
        <label class="control-label col-sm-2" for="titel">Titel:&nbsp;*</label>
        <div class="col-sm-10">
            <input type="text" require class="form-control" id="titel" name="Titel" placeholder="Titel van uw vraag of aanbod" value="{--TITEL--}" >
            <div id="titelx" class="form-error form-hidden">Wat is de titel van uw vraag of aanbod?</div>
        </div>
    </div>
<from>
Henry
sumber
1

Saya tahu ini adalah jawaban lama tapi inilah yang biasanya saya lakukan:

CSS:

.form-control-inline {
   width: auto;
   float:left;
   margin-right: 5px;
}

Kemudian bungkus bidang yang ingin Anda sebaris dalam div dan tambahkan .form-control-inline ke input, contoh:

HTML

<label class="control-label">Date of birth:</label>
<div>
<select class="form-control form-control-inline" name="year"> ... </select>
<select class="form-control form-control-inline" name="month"> ... </select>
<select class="form-control form-control-inline" name="day"> ... </select>
</div>
Jesus Gomez
sumber
1

untuk membuatnya sederhana, cukup tambahkan class="form-inline"sebelum input.

contoh: 

<div class="col-md-4 form-inline"> //add the class here...
     <label>Lot Size:</label>
     <input type="text" value="" name="" class="form-control" >
 </div>
rasa ingin tahu
sumber