J'essaie d'afficher un survol dans un modal Twitter Bootstrap comme un moyen d'afficher des conseils dans un formulaire. À première vue, tout semble fonctionner correctement; Cependant, en regardant de plus près, je trouve que peu importe ce que je mets dans le popover, le conteneur se réduit à sa largeur minimale possible - même s'il y a suffisamment d'espace pour qu'il puisse s'étendre en une ligne.Popover rétrécissant sur un Twitter Bootstrap 3 modal
Vous pouvez voir le phénomène dans cette capture d'écran:
(Vous pouvez essayer ici: http://jsfiddle.net/swBYA/ - cliquez sur le grand bouton pour afficher le modal, puis sur l'entrée pour montrer la popover
Si vous inspectez l'élément popover, vous verrez qu'il n'a pas de largeur fixe et que son max-width
dépasse sa largeur réelle calculée.
Modifier le width
du composant et le définir sur un nombre fixe change la largeur comme prévu, mais n'est pas propre, car certains popovers deviendront inutilement gros.
La définition de white-space
à nowrap
fait que le conteneur se développe pour s'adapter à son contenu comme prévu, mais cela casse bien sûr le max-width
. La modification du position
du conteneur de absolute
à relative
fait que le conteneur se comporte comme prévu, mais l'alignement est perturbé. Je pense que ceci suggère que le fait qu'il soit positionné de manière absolue tout en étant un enfant de l'élément modal doit l'affecter d'une manière ou d'une autre.
Pourquoi cela se produit-il? Comment puis-je le réparer afin que le conteneur Popover se développe pour s'adapter à son contenu, tout en honorant le max-width
? Merci d'avance :)
.popover {margin-right: -276px; } a travaillé pour moi. –