Bagaimana untuk Mengubah Saiz Twitter Bootstrap secara Dinamik untuk Kandungan Berubah?

Mengubah Saiz Twitter Bootstrap Modal Secara Dinamik untuk Kandungan Boleh Ubah

Apabila berurusan dengan pelbagai jenis kandungan dalam modal, seperti video, imej atau teks, ia boleh menjadi mencabar untuk memastikan saiz modal dilaraskan secara dinamik berdasarkan kandungan. Kebanyakan penyelesaian yang tersedia dalam talian hanya memenuhi saiz semula menggunakan satu parameter.

Satu kod HTML yang boleh digunakan untuk mengendalikan situasi ini, bersama-sama dengan Ajax untuk mendapatkan semula kandungan, adalah seperti berikut:

<code class="html"><div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="ModalLabel"></h3>
    </div>
    <div class="modal-body">
    </div>
</div></code>

Selepas bereksperimen dengan pelbagai penyelesaian, kod berikut didapati berkesan dalam mengubah saiz modal secara dinamik berdasarkan kandungannya:

.modal-dialog {
    position: relative;
    display: table; /* This is crucial */
    overflow-y: auto;
    overflow-x: auto;
    width: auto;
    min-width: 300px;
}

Kod ini memastikan bahawa dialog modal diletakkan secara relatif, dipaparkan sebagai jadual , mempunyai tatal menegak dan mendatar automatik, dan melaraskan lebarnya secara automatik berdasarkan kandungan dalam modal. Lebar minimum 300px ditetapkan untuk mengelakkan modal daripada menjadi terlalu sempit.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Saiz Twitter Bootstrap secara Dinamik untuk Kandungan Berubah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!