Comment contrôler la largeur du popover Bootstrap : exemple de largeur maximale, de conteneur et de JSFiddle

Détermination de la largeur du popover Bootstrap

Dans Bootstrap 3, la largeur des popovers est limitée par l'espace disponible dans l'élément déclencheur. Cela peut conduire à ce que les popovers apparaissent trop étroits lors de l'utilisation d'éléments d'entrée larges comme la classe de contrôle de formulaire.

Modification de la largeur CSS

Une méthode pour augmenter la largeur du popover consiste à CSS :

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

Ceci définit la largeur maximale du popover à 100 % de l'espace disponible dans son conteneur.

Spécification du conteneur

Si la modification de la largeur CSS n'est pas efficace, il peut être nécessaire de spécifier l'élément conteneur du popover :

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

Cela demande à Bootstrap de contenir le popover dans l'élément body, plutôt que dans l'élément déclencheur. Cela permet au popover de s'étendre au-delà de l'élément d'entrée.

Pertinence du conteneur

La largeur d'un popover est déterminée par les facteurs suivants :

• Largeur maximale : Défini par la propriété CSS max-width ou par JavaScript.
• Largeur du conteneur : La largeur de l'élément conteneur spécifié dans la configuration JavaScript.

Dans ce cas, la largeur du conteneur est définie sur 100 % du corps, permettant au popover de s'étendre sur tout l'écran.

Démonstration JSFiddle

Visitez le JSFiddle fourni pour voir un exemple fonctionnel :

http://jsfiddle.net/xp1369g4/

En ajustant la largeur maximale du popover et en spécifiant l'élément conteneur , vous pouvez obtenir la largeur de popover souhaitée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!