probleme mit dem Dropdown Menue - Dropdown Trigger von Bootstrap

DK1982 · 13.07.2018

Hallo an alle!

Seit gestern lerne ich mit dem Tutorial: Bootstrap "Modernes Webdesign auf tutkit.com Bootstrap näher kennenzulernen.

Nur funktioniert das Dropdown Menue "Dropdown Trigger", bei mir nicht. Jedoch klappte beim Tutorial alles wunderbar.
Ehrlich gesagt, bin ich wirklich überfragt, was ich falsch mache.
Vielleicht könnt Ihr mir ja helfen.

Hier ist der Quelltext:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Bootstrap Webseite von PSD-Tutorials</title>
</head>
<body>
<header>

<div class="fixedheader">
<a href=""><img src="img/bootstrap-training.png" alt="Bootstrap-Training"></a>

<div class="dropdown">
<a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown trigger
<span class="caret"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dLabel">
...
</ul>
</div>

</div>

</header>

<div class="container">

</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Freundliche Grüße
DK1982

Gelöschtes Mitglied 633957 · 14.07.2018

<span> innerhalb <a> ist ungewöhnlich aber wohl nicht das Problem. Was soll denn passieren?
Mit einem Klick auf den "Download trigger" Link kann ich die gelabelten Punkte ein- und ausblenden. Ist nicht dass das gewünschte Verhalten? Ohne das Training und Deine styles.css zu kennen wird eine Hilfe hier im Forum wohl eher schwierig sein.

HTML:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Bootstrap Webseite von PSD-Tutorials</title>
</head>
<body>

  <header>

  <div class="fixedheader">
   <a href=""><img src="img/bootstrap-training.png" alt="Bootstrap-Training"></a>

   <div class="dropdown">
    <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
     Dropdown trigger
     <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" aria-labelledby="dLabel">
     ...
    </ul>
   </div>

  </div>

  </header>

  <div class="container">
  </div> <!--end of container -->

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

</body>
</html>

Edit: Wenn das Training mit einer älteren Version von Bootstrap erstellt wurde und Du die aktuelle nutzt, dann wird vermutlich die fehlende popper.js das Problem sein, die jetzt das "Poppen" übernimmt.

DK1982 · 14.07.2018

hi,

danke für die schnelle Rückmeldung!

Sorry. Die Style.css Datei hab ich glatt vergessen, im Thread mit einzufügen.
Das wird jetzt nachgeholt:

@charset "UTF-8";
/* CSS Dokument */
body {
background-color: #04030b;
background-image: url("../img/bg-body.jpg");
background-repeat:no-repeat;

}
header {}
div.fixedheader {
background:rgba(0,0,0,0.3)
}
div.container {
max-width:1200px; width:100%;
}

Gelöschtes Mitglied 633957 · 14.07.2018

Bitte nutze die Code-Funktion beim Posten:

Okay, die styles.css ist noch nicht so richtig spannend!

Bitte lese das "Edit" aus meinem letzten Post, vermutlich ist dass das Problem.

DK1982 · 14.07.2018

danke für deine Hilfe.

Ich habe es jetzt ausprobiert und es klappt.