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

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>

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.

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>

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

Coba lihat ini

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

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

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

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>

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

.form-control {
    display:initial !important;
}

semua silakan periksa kode yang diperbarui karena harus kita gunakan

 form-control-static not only form-control

http://jsfiddle.net/tusharD/58LCQ/34/

terima kasih dengan salam

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.

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.