Bootstrap Responsive s'est Effondré sous-menu a hauteur fixe sur le premier effondrement

Ce problème peut être présente dans toutes les (que je connais) Twitter Bootstrap versions. Donc, j'ai une barre de navigation et lorsque l'écran est plus petit, il devient un rétractables bac. Ce comportement peut être vu sur le bootstrap site de démonstration. J'ai aussi des sous-menus, qui semblent s'est effondré sur la barre de navigation de l'expansion. Le problème est que, sur le premier effondrement, la rétractables devient explicite d'une hauteur définie. Si vous fermez et une nouvelle expansion de la rétractables obtient un height:auto;

Donc, lorsque je clique sur un élément de sous-menu, la liste déroulante est élargi, mais il déborde à cause de la hauteur étant de définir explicitement.

Ma solution était d'ajouter:

$(function() {
  $('.nav-collapse').on({
    shown: function() {
      $(this).css('height', 'auto');
    },

    hidden: function() {
      $(this).css('height', '0px');
    }
  });
});

Cela ne semble pas l'affecter à tous, j'ai supprimé le code et il a toujours le même effet. Si un JS Fiddle pourrait l'aider, je serais heureux d'en fournir un, mais vous pouvez voir tout cela sur le Bootstrap site de démonstration.

Merci d'avance,
Charles.

Vous devez fournir un lien vers votre site de démo ou un JS Fiddle. Il est difficile de comprendre votre question ici. Nous utiliser bootstrap beaucoup et n'ai pas eu de problèmes avec les débordements.
jsfiddle.net/nczJF - Cliquez sur la barre d'état, puis essayer le menu déroulant, puis fermez le tiroir et essayer de nouveau, et elle devrait développer comme prévu. Merci!

OriginalL'auteur Charles Kirk | 2013-02-06

  1. 21

    Il me gênait un peu, et après quelques recherches, j'ai trouvé que le problème peut être résolu par l'ajout de la .collapse classe à la .nav-collapse élément.

    Travail de démonstration (jsfiddle)

    Un de ces moment où nous venons de dire Meh.. je devrais avoir suivi la doc à la lettre (voir Responsive barre de navigation):

    <div class="nav-collapse collapse">
    <!-- .nav, .navbar-search, .navbar-form, etc -->
</div>

    Pour la postérité :

    Découvert grâce à ce numéro : https://github.com/twitter/bootstrap/issues/3788

    Je ne sais pas si c'est vraiment lié, mais mon débogage a montré le problème sur la première transition de la hauteur de la réinitialisation de toute façon (source) :

    $.support.transition && this.$element[dimension](this.$element[0][scroll])
    Génial, était la bonne solution! Merci!!!!
    Merci )!!!!!!!!!

    OriginalL'auteur Sherbrow

  2. 0

    Bootstrap est le réglage de l'élément de style de la hauteur de 280px lors de l'initialisation de l'effondrement de l'élément.

    J'ai ajouté cette JQuery dans mon ready() la fonction juste après mon appel .fermeture()

    $("#avail_detail").collapse();
$("#avail_detail").css("height","auto");

    Et, maintenant, les choses se comportent comme je l'attends.

    Merci pour vos efforts. J'ai ajouté ce code, mais la chute est mis en place à travers discrète data-toggle="collapse" et data-target=".nav-effondrement" et il ne semble pas résoudre. Vous avez tout à fait raison sur le problème cependant, toute chance vous pourriez modifier cette JsFiddle? jsfiddle.net/nczJF
    Dans l'ensemble, j'ai eu plus de chance dans le Bootstrap d'être plus explicite, et à l'aide de JavaScript directement, plutôt que d'utiliser le balisage des méthodes. C'est la 2ème fois que j'ai fait le tour d'un bug dans le Bootstrap par JavaScript. Cela dit, je serais toujours intéressé par une majoration de la solution au problème.

    OriginalL'auteur JeffK