Bagaimana untuk Menguruskan Lebar Medan Input dalam Bootstrap 3?

Pengurusan Lebar Input dalam Bootstrap 3

Bootstrap 3 menyediakan pilihan yang mantap untuk mengawal lebar medan input. Bertentangan dengan tanggapan bahawa sistem grid perlu digunakan, sememangnya terdapat kefungsian terbina dalam untuk mencapai ini.

Langkah penting ialah membungkus setiap kumpulan input, bukannya keseluruhan bentuk, dalam barisnya sendiri. Pendekatan ini memastikan bahawa kawalan input kekal bebas dan menghalang isu reka letak.

Contoh Penggunaan:

<code class="html"><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>

        <div class="row">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </form>
</div></code>

Dalam kod yang dikemas kini ini, setiap kumpulan dibalut dengan sendiri baris, membenarkan medan input menjadi sempit sambil mengekalkan struktur reka letak.

Adalah penting untuk ambil perhatian bahawa kelakuan blok lalai akan digunakan jika lebar skrin kurang daripada saiz pertanyaan media lg (1200px secara lalai). Untuk menentukan lebar yang berbeza untuk saiz skrin yang lebih kecil, kelas lajur yang sesuai boleh ditambah pada elemen baris.

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