Bagaimana untuk Mengawal Lebar Input dalam Borang Bootstrap 3?

Pengurusan Lebar Input dalam Bootstrap 3

Bootstrap 3 menawarkan julat pilihan terhad untuk mengawal lebar input borang. Seperti yang dicadangkan oleh soalan asal, menggunakan .col-lg-x tidak menghasilkan hasil yang diingini. Ini kerana .col-lg-x hanya boleh digunakan pada div kontena, yang membawa kepada isu reka letak.

Pendekatan Alternatif

Untuk mencapai kefungsian yang diingini, pertimbangkan untuk membungkus setiap kumpulan input dalam barisnya sendiri, bukannya melampirkan keseluruhan borang dalam satu baris. Contohnya:

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

Dalam pendekatan ini, setiap kumpulan input dibalut dalam .row yang berasingan, memastikan bahawa lebar input kekal konsisten tanpa mengira saiz skrin. Selain itu, dengan menambahkan .col-lg-5 pada bekas input, anda boleh mengawal lebar input dalam skrin yang lebih kecil juga.

Penghadan

Adalah penting untuk diperhatikan bahawa soalan asal bertujuan untuk penyelesaian menggunakan fungsi BS terbina dalam tanpa menggunakan grid. Walau bagaimanapun, seperti yang ditunjukkan oleh penyelesaian, walaupun pilihan terbina dalam memerlukan penggunaan grid untuk mencapai gelagat yang diingini.

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