Popover se cache sous la barre de navigation dans Twitter Bootstrap
J'ai un bouton d'aide dans ma barre de navigation, avec une liste de fonctionnalités.
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<div class="nav pull-right">
<div class="cb_inline_block">
<a class="btn btn-small cb_inline_block icon timezone_help" data-content="{% trans 'hahaha' %}" rel="popover" href="#" data-original-title="{% trans 'Time Zone' %}"><i class="icon-question-sign icon-large"></i></a>
Javascript:
$(document).ready(function () { $('.timezone_help').click(show_timezone_help); };
function show_timezone_help(event){
event.preventDefault();
$('.timezone_help').popover('show');
}
Mais quand je clique dessus, la liste est caché derrière la barre de navigation.
Dois-je vraiment définir le z-index manuellement? Ce serait douloureux. Sûrement, je dois être en train de faire quelque chose de mal. Merci.
source d'informationauteur Houman
Vous devez vous connecter pour publier un commentaire.
Tout d'abord, la réponse à votre question est que les popovers sont pas destinés à être utilisés dans une barre de navigation fixe. Dans le variables.moinsvous trouverez la liste suivante de z-index:
Comme vous pouvez le voir, Popovers sont destinés à glisser sous la barre de navigation fixe. Cependant, vous remarquerez que les info-bulles ne sera pas, et vous pouvez également utiliser
trigger: 'click'
sur les info-bulles.Sinon, si vous êtes deadset sur la liste, vous allez avoir à modifier manuellement c'est de z-index. La suivante permet de l'activer et de modifier de façon permanente, c'est le z-index, de sorte que vous n'avez pas à vous soucier de le faire chaque fois qu'elle nous montre, ou quelque chose comme ça:
JSFiddle
De seconde, juste une explication des raisons pour lesquelles mon exemple semblait au travail, alors que le vôtre n'a pas.
Le point de différence entre nos deux exemples (mmfansler JSFiddle et houmie JSFiddle) était en fait pas une différence entre 2.1.0 et 2.1.1. Deux d'entre eux ont
z-index: 1030
fixe navbars etz-index: 1010
pour les popovers (qui est ce que votre se plaindre).Le véritable point de différence, c'est que mon 2.1.0 exemple est aussi le chargement de la réactivité du code. Pour une raison quelconque BootstrapCDN changé la convention de nommage:
Je suppose que c'est une erreur, car depuis le moi par écrit ce bootstrap-combiné.min.css est également non-réactif seulement!
De toute façon, la seule différence entre les deux qui affecte la liste d'affichage est:
Cette règle, cependant, ne tient que pour certaines requêtes de média (qui, bien sûr, dans JSFiddle est activé depuis la fenêtre d'affichage de la file est petit).
Sinon, lorsque la barre de navigation n'est pas statique, vous continuerez à voir les popovers en dessous de la barre de navigation.
Vous voudrez peut-être garder un œil sur la BootstrapCDN Question N ° 41
Dans mon cas, j'ai décidé comme suit:
Popovers par défaut à l'indice de 1060, donc tout ce qui est au-dessus de 1060 est positionné au-dessus de Popovers
Sory pour le mauvais anglais, je suis Brésilienne et je suis en utilisant Google Translate
définir ces propriétés:
z-index doit être de max limite.