Comment positionner une Bootstrap liste?
Je suis en train de position d'un Bootstrap liste pour un trigger qui se trouve à l'extrême coin en haut à droite de 960px de large page web.
Idéalement, j'aimerais position sur le fond et déplacez la flèche avec CSS (de sorte que la flèche est sur le haut à droite de la liste). Malheureusement, le 'placement':'bas' de positionnement n'est pas suffisant, car il centre au-dessous du déclencheur.
Je suis à la recherche d'une solution qui sera la place de la liste de manière statique ci-dessous et à gauche de la gâchette.
- Il serait utile de mieux préciser votre question avec des exemples de code et peut-être une image le représente la façon dont vous souhaitez que la liste à la position par rapport à la détente.
- Je suis également à la recherche pour un meilleur contrôle de la liste de l'élément. Je n'ai rien trouvé encore.
Vous devez vous connecter pour publier un commentaire.
Cela fonctionne. Testés.
viewport
est de savoir comment obtenir ce bien placés. Cela permet au conteneur à être lié à une contrainte, sans la nécessité de l'annulation manuelle de la position (surtout pour un fixe/set)Simplement ajouter un attribut à votre liste! Voir mon JSFiddle si vous êtes pressé.
Nous voulons ajouter un ID ou une classe à un particulier de liste afin que nous puissions personnaliser la façon dont nous voulons via CSS.
Veuillez noter que nous ne voulons pas de personnaliser tous les popovers! C'est une très mauvaise idée.
Voici un exemple simple - affichage de la liste comme ceci:
JS:
CSS:
HTML:
tip
fonction dans votre code?J'ai créé un plugin jQuery qui offre 4 emplacements supplémentaires:
topLeft, haut, bottomLeft, bottomRight
Vous suffit d'inclure le minifiés js ou unminified js et la mise en correspondance css (minifiés vs unminified) dans le même dossier.
https://github.com/dkleehammer/bootstrap-popover-extra-placements
Liste de la Fenêtre d'affichage (Bootstrap v3)
La meilleure solution qui va travailler pour vous dans toutes les occasions, surtout si votre site dispose d'un liquide de largeur, est d'utiliser le fenêtre d'affichage option de l'Amorçage Liste.
Cela permettra de faire la liste de prendre la largeur à l'intérieur d'un sélecteur vous avez attribué. Donc, si le bouton de déclenchement sur le droit du conteneur, le bootstrap flèche apparaîtra également sur la droite, tandis que la liste est à l'intérieur de cette zone.
Voir jsfiddle.net
Vous pouvez également utiliser rembourrage si vous voulez de l'espace entre le bord du récipient. Si vous ne voulez pas de rembourrage suffit d'utiliser fenêtre: '.container"
dans le code html suivant exemple:
et avec CSS:
Liste de la Frontière (Bootstrap v4)
Similaire à la fenêtre, dans le Bootstrap, version 4, liste a introduit la nouvelle option limite
https://getbootstrap.com/docs/4.1/components/popovers/#options
viewport
est la clé pour résoudre ce problème. Le supplément de css est de préférence personnelleJ'ai résolu ce problème (partiellement) par l'ajout de quelques lignes de code pour le bootstrap css de la bibliothèque. Vous aurez à modifier tooltip.js, d'info-bulle.moins, popover.js et liste.moins
dans tooltip.js, ajoutez ce cas, dans l'instruction switch il y
dans l'info-bulle.moins, ajoutez ces deux lignes .infobulle{}
faire la même chose dans popover.js et liste.de moins en moins. En gros, partout où vous trouvez le code là où les autres postes sont mentionnés, ajouter votre position souhaitée en conséquence.
Comme je l'ai mentionné plus tôt, cela a résolu le problème en partie. Mon problème maintenant est que la petite flèche de la liste ne s'affiche pas.
remarque: si vous voulez avoir la liste en haut à gauche, utiliser l'attribut".haut et à gauche de l'attribut de '.de gauche'
De bootstrap 3.0.0:
Et modifier trop
WWW où est votre max-width pour afficher votre liste de contenu.
J'ai eu à faire les modifications suivantes à la liste à la position ci-dessous avec un certain chevauchement et de montrer la flèche correctement.
js
css
Peut être prolongée de flèche emplacements ailleurs .. profitez-en!
Bien sûr vous pouvez. Heureusement, il existe un moyen propre à faire et il est dans le Bootstrap liste /info-bulle de la documentation.
dans votre fichier css:-
Assurez-vous d'ajouter le modèle de bootstrap de l'info-bulle de documentation et d'ajouter personnalisé de votre nom de classe et de style à l'aide de css
Et, c'est tout. Vous pouvez trouver plus d'informations à ce sujet sur https://getbootstrap.com/docs/4.0/components/tooltips/
Peut-être que vous n'avez pas besoin de cette logique d'un comportement réactif.
E. g.
Bootstrap 3 a auto valeur pour placement. Bootstrap doc:
Si vous jetez un oeil à bootstrap codes source, vous remarquerez que la position peut être modifiée à l'aide de la marge.
Donc, d'abord, vous devriez changer de liste de modèle à ajouter propre classe css pour ne pas entrer en conflit avec d'autres popovers:
Puis à l'aide de css, vous pouvez facilement déplacer liste d'assemblage:
Cette solution ne serait pas de l'influence d'autres popovers vous avez. La même solution peut être utilisée sur les info-bulles ainsi parce que la liste de classe hérite de l'info-bulle de la classe.
Voici un simple jsFiddle