Buat borang sebaris dalam baris dan lajur

Question

Saya cuba mempelajari grid bootstrap dan ingin mencipta baris dengan dua lajur: satu lebar dan satu tidak begitu lebar. Di lajur kiri saya ingin meletakkan borang sebaris, dan di lajur kanan yang lebih sempit saya akan meletakkan borang lain dengan butang. Saya menyalin contoh Bootstrap dengan deretan 2 lajur, kemudian menyalin kod borang sebaris Bootstrap dan menampalnya ke dalam salah satu lajur, tetapi apabila saya menjalankan kod itu ia tidak sebaris. Ini kod saya setakat ini:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="MyContainer">
  <div class="row">
    <div class="col-6">
      <form class="form-inline">
        <label class="sr-only" for="inlineFormInputName2">Name</label>
        <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

        <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
        <div class="input-group mb-2 mr-sm-2">
          <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
        </div>

        <div class="form-check mb-2 mr-sm-2">
          <input class="form-check-input" type="checkbox" id="inlineFormCheck">
          <label class="form-check-label" for="inlineFormCheck">
              Remember me
            </label>
        </div>

        <button type="submit" class="btn btn-primary mb-2">Submit</button>
      </form>
    </div>
    <div class="col-6">
      One of two columns
    </div>
  </div>
</div>

Kawalan borang tidak sebaris, tetapi disusun satu di atas yang lain.

Bolehkah sesiapa melihat di mana silap saya?

Answer 1

Anda menggunakan kelas daripada versi Bootstrap yang lebih lama, tetapi anda menggunakan Bootstrap 5.1. Saya membuat beberapa perubahan: Pertama, ia adalah kelas .visually-hidden，不再是 .sr-only。其次，不再支持 .form-inline ，因此我将该类更改为 row 并将 .col-3 yang ditambah kepada kanak-kanak tingkatan. Saya juga menukar kelas kedua-dua lajur, seperti yang anda katakan anda mahu satu lebih luas daripada yang lain. Saya tidak tahu sumber Bootstrap yang anda gunakan, tetapi saya mengesyorkan anda merujuk kepada dokumentasi rasmi.

[email protected]/dist/css/bootstrap.min.css">

  

    

      

        

          Name
          
        

        

          Username
          
        

        

          
          
            Remember me
          
        

        Submit
      
    
    

      One of two columns