Bootstrap 3.0: Bagaimana cara membuat teks dan input pada baris yang sama?

90

Saat ini saya mengalihkan situs web saya ke Bootstrap 3.0. Saya mengalami masalah dengan masukan formulir dan pemformatan teks. Apa yang berhasil di Bootstrap 2 tidak berfungsi di Bootstrap 3.

Bagaimana saya bisa mendapatkan teks pada baris yang sama sebelum dan sesudah input formulir? Saya telah mempersempitnya menjadi masalah dengan kelas 'form-control "dalam contoh versi Bootstrap 3.

Bagaimana cara saya mendapatkan semua teks dan masukan dalam satu baris? Saya ingin contoh bootstrap 3 terlihat seperti contoh bootstrap 2 di jsfiddle.

Contoh biola JS

<div class="container ">
  <form>
      <h3> Format used to look like this in Bootstrap 2 </h3>
      <div class="row ">
          <label for="return1"><b>Return:</b></label>
          <input id="return1" name='return1' class=" input input-sm" style="width:150px"
                 type="text" value='8/28/2013'>
          <span id='return1' style='color:blue'> +/- 14 Days</span>
      </div>

       <br>   
       <br>   
           <h3> BootStrap 3 Version </h3>

      <div class="row">
          <label for="return2"><b>Return:</b></label>
          <input id="return2" name='return2' class="form-control input input-sm" style="width:150px"
                 type="text" value='8/28/2013'>
          <span id='return2' style='color:blue'> +/- 14 Days</span>
      </div>
  </form>

Pembaruan: Saya mengubah kode menjadi ini yang berfungsi tetapi mengalami masalah dengan penyelarasan sekarang. Ada ide?

<div class="form-group">
<div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
 </div>

html  formatting  twitter-bootstrap-3 
— fantasma gemuk
sumber
Keduanya sama, Anda hanya memiliki kelas tambahan form-controlpada contoh bootstrap 3 Anda.
— Kyle Needham
1
Lihat contoh di dokumen bootstrap. Anda kehilangan kelas pada label getbootstrap.com/css/#forms-horizontal
— bumperbox
Maaf tapi saya masih bingung. Contoh yang lebih rendah (BS3) memiliki kelas 'kontrol bentuk' yang memberikan tampilan yang lebih baik. Saya ingin tampilan yang lebih baik DAN menyimpan teks dan masukan pada baris yang sama. Apa yang saya lewatkan?
— fat fantasma
Izinkan saya mengajukan pertanyaan dengan cara yang berbeda. Bagaimana saya mendapatkan teks dan bidang input pada baris yang sama dan disejajarkan dalam kolom yang bagus? Lihat biola ini jsfiddle.net/fatfantasma/QwkpE . Tentu saja, saya ingin menambahkan teks ke ujung kanan pada baris yang sama. Bagaimana saya melakukannya?
— fat fantasma
.input-lgmeningkatkan tinggi bidang masukan, tetapi kita membutuhkan kelas untuk menyesuaikan tinggi dan ukuran label juga.
— Petrus Theron

Jawaban:

39

Saya akan meletakkan setiap elemen yang Anda inginkan sebaris di dalam div col-md- * terpisah dalam baris Anda. Atau paksa elemen Anda untuk ditampilkan sebaris. Kelas form-control menampilkan blok karena menurut bootstrap cara itu harus dilakukan.

— lomteslie.dll
sumber
137

Langsung dari dokumentasi http://getbootstrap.com/css/#forms-horizontal .

Gunakan kelas kisi yang telah ditentukan di Bootstrap untuk menyelaraskan label dan grup kontrol formulir dalam tata letak horizontal dengan menambahkan .form-horizontalke formulir (yang tidak harus berupa a <form>). Melakukannya mengubah .form-groupsuntuk berperilaku sebagai baris kisi, jadi tidak perlu .row.

Sampel:

<form class="form-horizontal">
  <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>
— Denis Besic
sumber
15
+1. Ini harus menjadi jawaban yang diterima, karena ini menautkan dokumentasi resmi
— EProgrammerNotFound
ini adalah jawaban tautan saja, dan tidak boleh diterima tanpa contoh, jika halaman yang direferensikan berubah atau dihapus.
— NDM
mengapa jawaban yang benar adalah jawaban yang benar? ini seharusnya jawaban yang benar! @fat fantasma
— JMASTER B
Harus membungkus ini dalam form-control-static, lihat jawaban di bawah
— rmcsharry
2
@Whitecat yang dirancang dengan tata letak responsif - untuk membuatnya berfungsi juga di seluler, gunakan col-xs- * daripada col-sm- *
— niico
23

Yang Anda butuhkan adalah .form-inlinekelas. Anda harus berhati-hati, dengan .form.inlinekelas baru Anda harus menentukan lebar untuk setiap kontrol.

Coba lihat ini

— Reza Shirazian
sumber
ini harus menjadi jawaban yang lebih baik daripada kelas form-horizontalkarena tidak memaksa div dengan form-grouppertunjukan kelas di blok.
— shawmzhu
Ini hanya berlaku untuk formulir dalam area pandang yang setidaknya lebarnya 768 piksel.
— rmcsharry
13

Tak satu pun dari ini berhasil untuk saya, harus menggunakan .form-control-statickelas.

http://getbootstrap.com/css/#forms-controls-static

— hakunin.dll
sumber
1
Ini sangat membantu. Tanpa ini, teks label dan teks masukan tidak sejajar dengan kolom- -
— Brendan Cody-Kenny
Ini harus menjadi jawaban yang benar, terutama jika Anda ingin formulir Anda
— terbungkus
Yup ini juga berhasil untuk saya. Solusi lain gagal untuk kolom col-xs- *. Menggunakan 'form-control-static text-right' berfungsi untuk saya di BS 3.3.7.
— Neutrino
10

Anda bisa melakukannya seperti ini:

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="inputType" class="col-sm-2 control-label">Label</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" id="input" placeholder="Input text">
        </div>
    </div>
</form>

Biola

— Paulo Fidalgo
sumber
4

berikan saja ibu div "class =" col-lg-12 ""

<div class="form-group">
<div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
 </div>

boleh jadi

<div class="form-group">
<div class="col-lg-12">
  <div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
</div>
</div>
— welboy
sumber
3

Cara saya menyelesaikannya adalah dengan menambahkan timpaan untuk semua kotak teks saya di css utama situs saya, sebagai berikut:

.form-control {
    display:initial !important;
}
— Hugo Nava Kopp
sumber
2
Apa fungsinya?
— AgilePro
0

Dalam Bootstrap 4 untuk Horizontal elemen yang dapat Anda gunakan .rowdengan .col-*-*kelas untuk menentukan lebar label dan kontrol. lihat tautan ini .

Dan jika Anda ingin menampilkan rangkaian label, kontrol formulir, dan tombol pada satu baris horizontal, Anda dapat menggunakan link.form-inline ini untuk info lebih lanjut.

— Shojaeddin
sumber
Pertanyaan tersebut secara khusus menyatakan Bootstrap 3.
— blupointmedia
1
Saya memiliki masalah yang sama dengan bootstrap 4, dan saya mempostingnya untuk membantu orang lain
— Shojaeddin
-2

Atau Anda bisa melakukan ini:

<table>
  <tr>
    <td><b>Return:</b></td>
    <td><input id="return1" name='return1' 
              class=" input input-sm" style="width:150px"
              type="text" value='8/28/2013'></td>
  </tr>
</table>

Saya mencoba semua saran di atas dan tidak ada yang berhasil. Saya tidak ingin memilih jumlah kolom yang tetap dalam kisi 12 kolom. Saya ingin prompt, dan masukan tepat setelahnya, dan saya ingin kolom meregang sesuai kebutuhan.

Ya, saya tahu, itu bertentangan dengan apa sebenarnya bootstrap. Dan Anda sebaiknya JANGAN PERNAH menggunakan meja. Karena DIV jauh lebih baik daripada tabel. Tetapi masalahnya adalah bahwa tabel, baris, dan sel sebenarnya BEKERJA.

YA - SAYA BENAR-BENAR tahu bahwa ada CSS yang fanatik, dan reaksi spontannya adalah tidak pernah menggunakan TABLE, TR, dan TD. Ya, saya tahu bahwa DIV class = "table" dengan DIV class = "row" dan DIV class = "cell" jauh lebih baik. Kecuali jika tidak berhasil, dan ada banyak kasus. Saya tidak percaya bahwa orang harus mengabaikan situasi itu secara membabi buta. Ada kalanya TABLE / TR / TD akan bekerja dengan baik, dan tidak ada alasan untuk menggunakan pendekatan yang lebih rumit dan lebih rapuh hanya karena dianggap lebih elegan. Pengembang harus memahami apa manfaat dari berbagai pendekatan, dan kompromi, dan tidak ada aturan mutlak bahwa DIV lebih baik.

"Contoh kasus - berdasarkan diskusi ini saya mengonversi beberapa tds dan trs yang ada menjadi div. 45 menit mengotak-atiknya mencoba membuat semuanya berbaris di samping satu sama lain dan saya menyerah. TDs kembali dalam 10 detik kemudian - berfungsi - langsung - di semua browser, tidak ada lagi yang bisa dilakukan. Coba buat saya mengerti - pembenaran apa yang Anda miliki untuk menginginkan saya melakukannya dengan cara lain! " Lihat [ https://stackoverflow.com/a/4278073/1758051]

Dan ini: "

Tata letak harus mudah. Fakta bahwa ada artikel yang ditulis tentang cara mencapai tata letak tiga kolom dinamis dengan header dan footer di CSS menunjukkan bahwa ini adalah sistem tata letak yang buruk. Tentu saja Anda bisa membuatnya berfungsi, tetapi ada ratusan artikel online tentang cara melakukannya. Hampir tidak ada artikel seperti itu untuk tata letak yang mirip dengan tabel karena sudah jelas. Tidak peduli apa yang Anda katakan terhadap tabel dan mendukung CSS, satu fakta ini membatalkan semuanya: tata letak tiga kolom dasar di CSS sering disebut "The Holy Grail". "[ Https://stackoverflow.com/a/4964107/ 1758051]

Saya belum melihat cara untuk memaksa DIV agar selalu berbaris di kolom dalam semua situasi. Saya terus diperlihatkan contoh-contoh sepele yang tidak benar-benar mengalami masalah. "Responsif" adalah tentang memberikan cara agar mereka tidak selalu berbaris dalam satu kolom. Namun, jika Anda benar-benar menginginkan kolom, Anda dapat membuang waktu berjam-jam mencoba membuat DIV berfungsi. Terkadang, Anda perlu menggunakan teknologi yang tepat tidak peduli apa kata orang fanatik.

— AgilePro
sumber
2
Tabel tidak responsif.
— Pedro Moreira
Semua orang tahu bahwa tabel tidak memformat dirinya sendiri menjadi bukan tabel. Tetapi jika yang Anda butuhkan adalah baris yang SELALU tetap baris. Anda simpley tidak dapat menerapkan ini dengan tag DIV. Orang bertindak seperti Anda selalu menginginkan daya tanggap, tetapi apa yang Anda lakukan itu membingungkan "sebagian besar waktu" dengan "sepanjang waktu". Pada saat penulisan, jawaban ini memiliki dua suara setuju. Jika Anda setuju dengan maksud saya di sini, bahwa terkadang Anda hanya perlu TR, beri tahu orang lain juga.
— AgilePro
Anda berhak atas pendapat Anda sendiri, tetapi menurut saya konsensus umumnya adalah bahwa Anda tidak boleh menggunakan tabel untuk hal lain yang menunjukkan data tabular. Tabel terlalu terbatas pada apa yang dapat mereka lakukan dan seberapa dapat disesuaikan. Jika Anda masih perlu memberikan div kemampuan untuk mengalir seperti baris dan kolom tabel, lihat flex: css-tricks.com/snippets/css/a-guide-to-flexbox
— Pedro Moreira
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.