Bagaimana untuk Menjadikan Popover Bootstrap Lebih Luas Apabila Diletakkan di Sebelah Kanan Input?

Cara Mengubah Lebar Popover Bootstrap

Apabila menggunakan Bootstrap 3 dan cuba melaksanakan popover di mana peletakan berada di sebelah kanan komponen input, anda mungkin menghadapi masalah di mana lebar popover kelihatan tidak mencukupi. Masalah ini timbul daripada reka bentuk elemen kawalan bentuk dalam Bootstrap, yang menghasilkan elemen input lebar penuh.

Kod HTML

<code class="html"><div class="row">
    <div class="col-md-6">
        <label for="name">Name:</label>
        <input id="name" class="form-control" type="text"
                         data-toggle="popover" data-trigger="hover"
                         data-content="My popover content.My popover content.My popover content.My popover content." />
    </div>
</div></code>

Penyelesaian CSS

Anda boleh ubah suai lebar popover menggunakan CSS:

<code class="css">/* The max width is dependant on the container (more info below) */
.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}</code>

Walau bagaimanapun, jika ini tidak menyelesaikan isu, anda mungkin perlu menentukan bekas untuk popover:

<code class="javascript">// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
    container: 'body'
});</code>

Dengan menggunakan dan melaraskan sifat kontena, popover akan mengembang kepada lebar penuhnya.

Maklumat Lanjut

• popover pada mulanya terhad kepada elemen pencetus.
• Dengan menyatakan bekas sebagai badan, anda membenarkan popover melangkaui had elemen.
• Lebar maksimum popover ditentukan oleh bekas.

JSFiddle

Lawati JSFiddle berikut untuk menyaksikan penyelesaian dalam tindakan:

JSFiddle: http://jsfiddle.net/xp1369g4/

Atas ialah kandungan terperinci Bagaimana untuk Menjadikan Popover Bootstrap Lebih Luas Apabila Diletakkan di Sebelah Kanan Input?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!