Hallo Leute,
ich habe ein Problem mit bootstrap und der Navbar.
Dargestellt wird alles problemlos. Beim Hoover werden auch die Menueinträge etwas hervorgehoben und der aktive Menupunkt ist ersichtlich.
Jedoch funktioniert das einblenden des Nav-content nicht. Heist der anfang aktive Nav-content bleibt aktiv und andere werden nicht dargestellt. Zwar spring der Browser nach unten zu dem entsprechenden Content, welcher aber weiterhin ausgeblendet bleigt und das anfangs aktive bleibt auch sichtbar.
Ich weiß nicht wirklich an welcher stelle ich den Fehler gemacht haben könnte. Mein Erfahrungen halten sich auch ein Grenzen. Deshalb bitte ich um eure Unterstützung. Vielleicht spring jemandem was ins Auge 
Hier mal mein html-code (auf das wesentliche Zusammengekürzt):
<!DOCTYPE html>
<html lang="de">
<head>
<title>Testseite</title>
<meta charset="utf8">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="testseite.de">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=yes">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<style>
.page{
display: table;
width: 100%;
}
.page-content,
.sidebar{
display: table-cell;
}
.sidebar{
width: 330px;
padding-right: 50px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="d-none d-md-block col-md-12">
<img src="./Images/Header_2.jpg" alt="" style="width: 100%; max-height: 300px;">
</div>
<div class="d-md-none col-12">
<!--<img src="./Images/HeaderKlein.png" alt="" style="width: 100%;">-->
</div>
</div>
</div>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand d-md-none" href="#"><img src="./Images/LogoMenu.png" alt="" style="height: 30px;"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" href="#home" id="home-tab" data-target="homw" data-toggle="tab" role="tab" aria-controls="home" aria-selected="true">HOME<span class="sr-only">(current)</span></a>
<a class="nav-link" href="#angebote" id="angebote-tab" data-target="angebot" data-toggle="tab" role="tab" aria-controls="angebote" aria-selected="false">UNSERE AKTUELLEN ANGEBOTE</a>
<a class="nav-link" href="#kontakt" id="kontakt-tag" data-target="kontakt" data-toggle="tab" role="tab" aria-controls="kontakt" aria-selected="false">KONTAKT</a>
</div>
</div>
</nav>
<div class="nav-content">
<div class="nav-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home</div>
<div class="nav-pane fade" id="angebote" role="tabpanel" aria-labelledby="angebote-tab">Angebote</div>
<div class="nav-pane fade" id="kontakt" role="tabpanel" aria-labelledby="kontakt-tab">Kontakt</div>
<div class="nav-pane fade" id="impressum" role="tabpanel" aria-labelledby="impressum-tab">Impressum</div>
<div class="nav-pane fade" id="agb" role="tabpanel" aria-labelledby="agb-tab">AGB's</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12 bg-dark text-right text-xs-center p-3">
<strong><a href="impressumg.html">IMPRESSUM</a> - <a href="abgs.html">AGB's</a></strong>
</div>
</div>
</div>
</body>
</html>