Antworten zum Thema „Dropdown mit Boostrap 4“

Gelöschtes Mitglied 633957 · 08.03.2018

Ich würde gerne mit Bootstrap 4 einen Button mit der dropdown-Klasse, btn-group oder einer Entsprechung nutzen.

Folgender Code funktioniert nicht:

HTML:

<!doctype html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 4 Dropdown</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  </head>

  <body>

    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
        Bootstrap 4 Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li class="dropdown-item"><a href="">Die Klasse</a></li>
        <li class="dropdown-item"><a href=""><em>dropdown</em></a></li>
        <li class="dropdown-item"><a href="">will nicht!?!</a></li>
      </ul>
    </div>

  </body>
</html>

Mit Bootstrap 3.3.7 funktioniert es und wenn ich mit 4.0.0 dem DIV anstelle von dropdown die Klasse navbar gebe, ist die Dropdown-Funktionalität auch wieder gegeben. Nur möchte ich die navbar-Klasse hier nicht nutzen.

Weiß jemand wie ich das DropDown Menü mit Bootstrap 4 realisieren kann?

Besten Dank, Ty

AliceG · 08.03.2018

Wie wäre es damit?:
https://getbootstrap.com/docs/4.0/components/dropdowns/

Gelöschtes Mitglied 633957 · 08.03.2018

AliceG schrieb:
Wie wäre es damit?:

Ist im Prinzip ähnlich meinem Beispiel.
Ich habe den Beispielcode hier in mein Dokument eingefügt:

HTML:

<!doctype html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>BS 4.0 Dropdown</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  </head>

  <body>

    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </div>

  </body>
</html>

Das Resultat ist das gleiche wie im ersten Post: Es droppt nichts - und erst recht nichts down!
Auch hier ist es wieder so, dass wenn ich die Klasse auf navbar ändere oder Bootstrap 3.3.7 verwende funktioniert es, nur mit 4.0.0 will es einfach nicht gehen.

Edit: FEHLER GEFUNDEN!
Mit Bootstrap 4.0.0 ist die popper.js erforderlich:

Code:

<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>

bzw.

Code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

Jetzt funktioniert wieder alles wie es soll!

@AliceG besten Dank! Mich noch einmal auf die Bootstrap Site zu schicken hat geholfen! :daumenhoch