Bagaimana untuk Mengawal Lebar Input dalam Bootstrap 3 Tanpa Grid?

Pengurusan Lebar Input dalam Bootstrap 3

Mengawal lebar input dalam Bootstrap 3 boleh menjadi mencabar, terutamanya semasa mengelakkan penggunaan grid atau CSS tambahan.

Soalan Asal:

Bagaimana untuk menetapkan lebar input dalam Bootstrap 3 tanpa menggunakan sistem grid atau pilihan tidak berdokumen?

Penghadan `.col-lg- kelas x:

Menggunakan .col-lg-x untuk menetapkan lebar input tidak boleh dilaksanakan kerana ia hanya boleh digunakan pada div kontena, yang membawa kepada isu reka letak dan apungan.

Penyelesaian:

Untuk menetapkan lebar input dengan berkesan, bungkus setiap kumpulan input dalam barisnya sendiri, seperti yang dilihat di bawah:

<div class="container">
  <form role="form">
    <div class="row">
      <div class="form-group col-lg-1">
        <label for="code">Name</label>
        <input type="text" class="form-control" />
      </div>
    </div>

    <div class="row">
      <div class="form-group col-lg-1">
        <label for="code">Email</label>
        <input type="text" class="form-control input-normal" />
      </div>
    </div>
  </form>
</div>

Pertimbangan Tambahan:

• Penyelesaian ini membenarkan lebar input tersuai tanpa mengira saiz skrin.
• Ia mengekalkan reka letak Bootstrap sambil memastikan lebar input mengikut spesifikasi yang anda inginkan.
• Oleh lalai, lebar input akan berkuat kuasa pada skrin yang lebih lebar daripada 95px. Untuk menyesuaikan titik putus, rujuk dokumentasi sistem grid Bootstrap.

Atas ialah kandungan terperinci Bagaimana untuk Mengawal Lebar Input dalam Bootstrap 3 Tanpa Grid?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!