Cara Mengawal Lebar Popover Bootstrap: Contoh Lebar Maks, Bekas dan JSFiddle

Menentukan Lebar Popover Bootstrap

Dalam Bootstrap 3, lebar popover dikekang oleh ruang yang tersedia dalam elemen pencetus. Ini boleh menyebabkan popover kelihatan terlalu sempit apabila menggunakan elemen input lebar seperti kelas kawalan bentuk.

Pengubahsuaian Lebar CSS

Satu kaedah untuk meningkatkan lebar popover ialah melalui CSS:

<code class="CSS">.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}</code>

Ini menetapkan lebar maksimum popover kepada 100% daripada ruang yang tersedia dalam bekasnya.

Spesifikasi Bekas

Jika pengubahsuaian lebar CSS tidak berkesan, mungkin perlu untuk menentukan elemen bekas untuk popover:

<code class="JS">$('[data-toggle=&quot;popover&quot;]').popover({
    container: 'body'
});</code>

Ini mengarahkan Bootstrap untuk mengandungi popover dalam elemen badan, bukannya elemen pencetus. Ini membenarkan popover melangkaui elemen input.

Perkaitan Bekas

Lebar popover ditentukan oleh faktor berikut:

• Lebar Maks: Ditakrifkan oleh sifat CSS lebar maksimum atau oleh JavaScript.
• Lebar Bekas: Lebar elemen kontena yang dinyatakan dalam konfigurasi JavaScript.

Dalam kes ini, lebar bekas ditetapkan kepada 100% daripada badan, membenarkan popover meregangkan seluruh skrin.

Demonstrasi JSFiddle

Lawati JSFiddle yang disediakan untuk melihat contoh yang berfungsi:

http://jsfiddle.net/xp1369g4/

Dengan melaraskan lebar maks popover dan menentukan elemen bekas , anda boleh mencapai lebar popover yang diingini.

Atas ialah kandungan terperinci Cara Mengawal Lebar Popover Bootstrap: Contoh Lebar Maks, Bekas dan JSFiddle. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!