Bagaimana untuk Mengawal Lebar Input dalam Borang Bootstrap 3 Tanpa Menjejaskan Reka Letak?

Lebar Input dalam Bootstrap 3

Dalam Bootstrap 3, mengurus lebar input boleh menjadi satu cabaran. Walaupun dokumentasi mencadangkan penggunaan kelas .col-lg-x, penyelesaian ini mempunyai had.

Isu Asal:

Soalan asal berpunca daripada ketidakupayaan untuk menetapkan input lebar menggunakan .col-lg-x tanpa menjejaskan reka letak bekas. Kelas ini hanya boleh digunakan pada bekas itu sendiri, mengakibatkan isu reka letak yang tidak diingini.

Penyelesaian:

Penyelesaian praktikal terletak pada membungkus setiap kumpulan input dalam barisnya sendiri . Dengan berbuat demikian, kelas .col-lg-x boleh digunakan pada kumpulan individu, mengawal lebarnya sambil mengekalkan struktur bentuk keseluruhan.

Contoh Kod:

<code class="html"><div class="container">
    <h1>My Form</h1>
    <p>How to make these input fields small and retain the layout.</p>
    <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>

Nota:

Untuk mencapai saiz yang konsisten merentas saiz skrin yang berbeza, kelas .col-xs-5 boleh disertakan untuk skrin yang lebih kecil. Mengalih keluarnya tidak akan menjejaskan kefungsian keseluruhan.

Kesimpulan:

Dengan membungkus kumpulan input dalam baris individu dan menggunakan kelas .col-lg-x, pembangun boleh dengan berkesan uruskan lebar input dalam Bootstrap 3 tanpa menggunakan sistem grid atau kelas CSS tersuai.

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