Menu déroulant apparaît pas dans Bootstrap

Je vais essayer d'obtenir une base menu déroulant dans le Bootstrap:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <div class="dropdown">
      <!-- Link or button to toggle dropdown -->
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <li><a tabindex="-1" href="#">Action</a></li>
        <li><a tabindex="-1" href="#">Another action</a></li>
        <li><a tabindex="-1" href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Separated link</a></li>
      </ul>
    </div>

  </body>
</html>

Cependant, rien ne s'affiche. Je sais que le local les fichiers CSS et JS sont soumis correctement. Comme je le comprends, la valeur par défaut JS comprend tous les plugins.

EDIT: Merci à tous pour vos commentaires. Je peux seulement ajouter, dans le cas où les personnes se retrouvent dans la même situation que je suis, pour déplacer plus bas dans le tutoriel avant de copier et de coller les extraits de code.

pouvez-vous mettre dans un jsfiddle?
Je n'avais jamais utilisé jsfiddle avant, donc je ne sais pas si tout est OK, mais ici il est.

OriginalL'auteur ezequiel-garzon | 2012-12-24

  1. 14

    Je pense que votre code a été fondamentalement bon, mais il vous manque un lien pour déclencher le menu déroulant. Voir sat jsFiddle

    Noter que j'ai ajouté 

    <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

    Voici un exemple de la façon de l'inclure dans un complet de la barre de navigation

    Bonne chance!

    Merci beaucoup... C'est frustrant d'entreprise à essayer d'apprendre de Bootstrap. Je m'attends officiel des extraits d'être autonome, mais, hélas, je suppose qu'ils attendent de vous que vous savez ce que vous faites. Des conseils sur la façon d'acquérir le minimum de HTML/CSS/JS de connaissances afin de bien le harnais de Bootstrap sera appréciée. Merci encore.
    Je sais ce que vous entendez sur l'utilisation de l'fragments de ne pas toujours être aussi simple que vous pourriez vous attendre. Je me suis trouvé à l'inspection d'un lot de HTML et CSS code source pour remplir les blancs. Je commence à apprécier la logique qui sous-tend la façon dont le style d'échafaudage et de travail même si, donc, tout devient plus facile avec le temps 😉

    OriginalL'auteur David Taiaroa

  2. 2

    De la docs:

    Regardant seulement le menu déroulant, voici le code HTML requis. Vous devez envelopper la liste déroulante du déclencheur et le menu déroulant à l'intérieur .liste déroulante ou un autre élément qui déclare position: relative;. Ensuite, il suffit de créer le menu.

    Donc, vous avez probablement besoin de mettre le CSS pour votre dropdown classe à avoir (au moins) position: relative;. Aussi, vous avez un display:none sur .dropdown-menu par défaut. Essayez également primordial que.

    Merci, mais je crois que l'exemple fourni le nécessaire .liste déroulante de l'emballage, non?
    Eh bien il n'y a pas de .dropdown classe par défaut bootstrap css, de sorte que vous avez à faire.
    Merci encore, mais cela ne résout pas le problème. En tout cas, mon (unminified) bootstrap.css a, l'écart entre les lignes 2840 et 2843, la déclaration .dropup, .dropdown { position: relative; }. J'ai ajouté votre suggestion manuellement, en vain.
    Vous avez un display:none sur .dropdown-menu par défaut. Essayez primordial.
    Merci encore, Miha. Je pense que quelques articles en bas il y a une meilleure exemple de la façon dont des listes déroulantes sont destinés à être utilisés. Je sais que j'ai été un vieux grincheux, mais... cette approche fragmentée est déconcertant lorsqu'il est appliqué à un produit technique. Je suppose que l'on est censé lire tous les docs avant de tenter le truc. De plus, mes connaissances CSS est bien en deçà de la vôtre, mais justement, j'espérais un très bruts de compréhension des CSS me permettrait d'utiliser Bootstrap lieu de bidouiller le CSS lui-même! Oh, eh bien... Merci une fois de plus!

    OriginalL'auteur Miha Rekar

  3. 1

    Au lieu de div,essayez un parent ul et li pour envelopper votre ul que vous avez posté ci-dessus.
    par exemple,

        <ul class="nav nav-pills span7 pull-right" id="upper_username_hide">
       <li class= "dropdown" data-dropdown="dropdown">
         <a id="" class="dropdown-toggle" data-toggle="dropdown" href="#">
          <b class="caret dropdown-toggle"></b>
         </a>
         <ul class="dropdown-menu" >
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
        </ul>
      </li>
    </ul>

    Je ne pense pas que l'onglet index sera nécessaire comme bootstrap css prend soin de cela.
    Bonne chance!

    Merci! Au risque de jeter autour de nombreuses questions ouvertes dans les commentaires... Comment allez-vous la construction de votre compréhension de l'utilisation de Bootstrap? Toutes les ressources recommandées, en plus de la documentation officielle? (Le tabindex paramètres ont été copiés mot à mot de l'officiel extrait.)
    La création et l'expérimentation avec le bootstrap des classes est toujours le meilleur moyen pour cela,mais quand vous êtes à une perte,essayez de l'inspection de code à partir de certains sites existants déjà en utilisant twitter bootstrap.

    OriginalL'auteur Rajarshi

  4. 0

    Dans mon cas, j'ai découvert le .dropdown-menu classe de bootstrap, était à la propriété top:top: 100%, qui a provoqué que la liste a été montré à l'extérieur de la fenêtre d'affichage. J'ai fait remplacer le haut de la valeur avec une autre classe, et qui maintenant travaille.

    OriginalL'auteur Ruben