Bagaimana untuk Menguruskan Lebar Input dalam Bootstrap 3?

Mengurus Lebar Input dengan Bootstrap 3

Bootstrap 3 menyediakan rangka kerja yang komprehensif untuk mencipta halaman web yang responsif dan menarik secara visual. Walau bagaimanapun, apabila ia berkaitan dengan mengurus lebar input, mungkin terdapat sedikit kekeliruan tentang pendekatan terbaik.

Fungsi Terbina Dalam atau CSS Tersuai?

Sesetengah pembangun telah mencuba untuk menggunakan kelas .col-lg-x untuk mengawal lebar input, tetapi ini mempunyai had. Menggunakannya pada div kontena boleh menyebabkan isu susun atur dan apungan.

Konsensusnya ialah tiada fungsi terbina dalam dalam Bootstrap 3 yang boleh mengurus secara langsung lebar input tanpa terpaksa ke grid atau menambah CSS tambahan.

Penyelesaian Disyorkan: Sistem Grid dengan CSS Tersuai

Untuk mencapai hasil yang diingini, disyorkan untuk menggunakan grid Bootstrap sistem bersempena dengan kelas CSS tersuai.

Begini cara ia berfungsi:

• Balut setiap kumpulan input dalam satu baris menggunakan kelas .row.
• Gunakan kelas CSS tersuai, seperti .input-wide, pada input yang sepatutnya mempunyai lebar yang dikembangkan.
• Gunakan kelas grid Bootstrap seperti .col-lg-1 atau .col-xs-5 untuk menentukan lebar yang diingini pada saiz skrin yang berbeza.

Kod Contoh:

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

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

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

Kelebihan Pendekatan ini:

• Ia membolehkan anda menetapkan lebar yang berbeza dengan mudah untuk medan input pada saiz skrin yang berbeza.
• Ia mengekalkan responsif sistem grid Bootstrap.
• Ia menyediakan modular dan penyelesaian boleh guna semula untuk mengurus lebar input merentas berbilang halaman.

Dengan mengikut garis panduan ini, anda boleh mengurus lebar input dengan berkesan dalam Bootstrap 3 dan mencipta borang web yang mesra pengguna dan menarik secara visual.

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