[Bootstrap] Dropdown-Menü funktioniert nicht

  • HTML

Es gibt 10 Antworten in diesem Thema. Der letzte Beitrag () ist von Alex-Digital.

    [Bootstrap] Dropdown-Menü funktioniert nicht

    Hallo,

    ich habe eine Website (Achtung! Testphase!).

    Da habe ich einen Button mit einem Dropdown-Menü.

    Da ist der Button mit dem Pfeil zu klein und das Menü funktioniert nicht. Kann man das beheben?

    Ich habe den Code mal 1:1 aus dem Tutorial unter twitter.github.io/bootstrap/ übernommen,
    aber es schaut nicht so aus wie im Tutorial!

    Wieso?

    Ich bin im Bereich Bootstrap sehr unerfahren, entschuldigt mich das bitte.

    Freue mich auf Antworten.

    MFG

    Alex-Digital :D
    ~ Alex-Digital :D

    if(!Internet.VBP.Get<User>("Alex-Digital").IsOnline) this.Close(); :D

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Alex-Digital“ ()

    Hallo,

    ich habe es mit dem data-toggle gelöst, aber
    es funktioniert nicht und das JS hatte auch nicht
    funktioniert auf meiner HTML-Test-Seite.

    MFG

    Alex-Digital :D
    ~ Alex-Digital :D

    if(!Internet.VBP.Get<User>("Alex-Digital").IsOnline) this.Close(); :D

    schau mal hier: jsbin.com/udaput/1/

    Spoiler anzeigen

    HTML-Quellcode

    1. <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
    2. <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
    3. <script src="http://code.jquery.com/jquery.min.js"></script>
    4. <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
    7. <div class="navbar navbar-static" id="navbar-example">
    8. <div class="navbar-inner">
    9. <div style="width: auto;" class="container">
    10. <a href="#" class="brand">Project Name</a>
    11. <ul role="navigation" class="nav">
    12. <li class="dropdown">
    13. <a data-toggle="dropdown" class="dropdown-toggle" role="button" href="#" id="drop1">Dropdown <b class="caret"></b></a>
    14. <ul aria-labelledby="drop1" role="menu" class="dropdown-menu">
    15. <li role="presentation"><a href="http://google.com" tabindex="-1" role="menuitem">Action</a></li>
    16. <li role="presentation"><a href="#anotherAction" tabindex="-1" role="menuitem">Another action</a></li>
    17. <li role="presentation"><a href="#" tabindex="-1" role="menuitem">Something else here</a></li>
    18. <li class="divider" role="presentation"></li>
    19. <li role="presentation"><a href="#" tabindex="-1" role="menuitem">Separated link</a></li>
    20. </ul>
    21. </li>
    22. <li class="dropdown">
    23. <a data-toggle="dropdown" class="dropdown-toggle" role="button" id="drop2" href="#">Dropdown 2 <b class="caret"></b></a>
    24. <ul aria-labelledby="drop2" role="menu" class="dropdown-menu">
    25. <li role="presentation"><a href="#" tabindex="-1" role="menuitem">Action</a></li>
    26. <li role="presentation"><a href="#" tabindex="-1" role="menuitem">Another action</a></li>
    27. <li role="presentation"><a href="#" tabindex="-1" role="menuitem">Something else here</a></li>
    28. <li class="divider" role="presentation"></li>
    29. <li role="presentation"><a href="#" tabindex="-1" role="menuitem">Separated link</a></li>
    30. </ul>
    31. </li>
    32. </ul>
    33. <ul class="nav pull-right">
    34. <li class="dropdown" id="fat-menu">
    35. <a data-toggle="dropdown" class="dropdown-toggle" role="button" id="drop3" href="#">Dropdown 3 <b class="caret"></b></a>
    36. <ul aria-labelledby="drop3" role="menu" class="dropdown-menu">
    37. <li role="presentation"><a href="#" tabindex="-1" role="menuitem">Action</a></li>
    38. <li role="presentation"><a href="#" tabindex="-1" role="menuitem">Another action</a></li>
    39. <li role="presentation"><a href="#" tabindex="-1" role="menuitem">Something else here</a></li>
    40. <li class="divider" role="presentation"></li>
    41. <li role="presentation"><a href="#" tabindex="-1" role="menuitem">Separated link</a></li>
    42. </ul>
    43. </li>
    44. </ul>
    45. </div>
    46. </div>
    47. </div>

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „slice“ ()

    Hallo,

    @JensMan:

    Es steht schwarz auf weiß im Quellcode:

    HTML-Quellcode

    1. <div class="btn-group">
    2. <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
    3. <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
    4. <ul class="dropdown-menu">
    5. <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
    6. <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
    7. <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
    9. </ul>
    10. </div>
    ~ Alex-Digital :D

    if(!Internet.VBP.Get<User>("Alex-Digital").IsOnline) this.Close(); :D

    @Alex-Digital:

    HTML-Quellcode

    1. <div class="input-append">
    2. <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
    3. <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
    4. <ul class="dropdown-menu">
    5. <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
    6. <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
    7. <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
    9. </ul>
    10. </div>

    meinte ich, habs nur grad nicht gefunden
    Always code as if the person who ends up maintaining your code is a violent psychopath who knows where you live.

    BeryJu.org BeryJu.org/Blog

    Hey Alex-Digital,

    du musst natürlich zunächst erstmal die JavaScript Dateien in dem HTML-Dokument einbinden.

    HTML-Quellcode

    1. <script src="http://code.jquery.com/jquery.js"></script>
    2. <script src="js/bootstrap.min.js"></script>


    am besten direkt as Ende.

    HTML-Quellcode

    1. <script src="http://code.jquery.com/jquery.js"></script>
    2. <script src="js/bootstrap.min.js"></script>
    3. </body>
    4. </html>



    Nun sollte es auch funktionieren.

    Mit freundlichen Grüßen,
    Jan

    Hallo,

    @Jan: Das Dropdown funktioniert jetzt, aber
    der Dropdown-Button (siehe Website) ist noch zu klein.

    Wie kann man das beheben?

    MFG

    Alex-Digital :D
    ~ Alex-Digital :D

    if(!Internet.VBP.Get<User>("Alex-Digital").IsOnline) this.Close(); :D

    Quellcode

    1. <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span>&nbsp;</a>

Facebook
Telefonspende