Rumah >hujung hadapan web >tutorial css >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="popover"]').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:
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!