Hallo liebe Community,
ich habe mir mit Bootstrap vor längerer Zeit eine Webseite (www.marcovogel108.de/) erstellt. Leider öffnet sich auf dem Smartphone das Menü nicht. Google und eigenes probieren haben leider auch zu keiner Lösung geführt. Ich hoffe, dass ihr mir helfen könnt.
Der HTML-Code der Startseite z.B. lautet:
[HTML]
<title>Marco Vogel</title>
<!-- Bootstrap-CSS -->
<link href="bootstrap.min.css" rel="stylesheet">
<link href="carousel.css" rel="stylesheet">
<link href="Normalize.css" rel="stylesheet">
<!-- Piwik -->
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Navigation ein-/ausblenden</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Start.html">Marco Vogel</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Start</a></li>
<li><a href="Uebermich.html">Über mich</a></li>
<li><a href="Kontakt.html">Kontakt</a></li>
<li><a href="Portfolio.html">Portfolio</a></li>
<li><a href="Portraitfotografie.html">Portraitfotografie</a></li>
<li><a href="Blog.html">Blog</a></li>
<li><a href="Empfehlungen.html">Empfehlungen</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!-- Karussell
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Positionsanzeige -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<!-- <li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li> -->
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="Bilder_Homepage/eltocal_banner1.jpg" alt="Erste Folie">
<div class="container">
<div class="carousel-caption">
<h1>Herzlich Willkommen!</h1>
</div>
</div>
</div>
<!--
<div class="item">
<img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Zweite Folie">
<div class="container">
<div class="carousel-caption">
<h1>Noch eine Beispiel-Überschrift.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Mehr erfahren</a></p>
</div>
</div>
</div>
<div class="item">
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Dritte Folie">
<div class="container">
<div class="carousel-caption">
<h1>Aller guten Dinge sind drei.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Galerie erkunden</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Zurück</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Weiter</span>
</a>
</div><!-- /.carousel -->
<!-- Marketing-Botschaften und Präsentationsspalten
================================================== -->
<!-- Der Rest der Seite wird in einem anderen Container verpackt, um den Inhalt schön zu zentrieren. -->
<div class="container marketing">
<!-- Drei Spalten Text unter dem Karussell -->
<div class="row">
<div class="col-lg-4">
<img class="img-circle" src="Bilder_Homepage/Marco_hp.jpg" alt="ein Bild von mir in Passau" width="140" height="140">
<h2>Über mich</h2>
<p>Mein Name ist Marco Vogel, ich bin 22 Jahre alt und komme aus dem Umkreis Karlsruhe. Du willst mehr wissen? Dann bist du hier richtig! </p>
<p><a class="btn btn-default" href="Uebermich.html" role="button">Erfahre mehr »</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="img-circle" src="Bilder_Homepage/portfolio_hp.jpg" alt="Caminito del Rey" width="140" height="140">
<h2>Portfolio</h2>
<p>Obwohl ich bevorzugt Menschen und Lost Places fotografiere, fotografiere ich auch sonst gerne mal andere Dinge. </p>
<p><a class="btn btn-default" href="Portfolio.html" role="button">Zum Portfolio »</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="img-circle" src="Bilder_Homepage/sarah_geländer_hp.jpg" alt="Portrait in der Abendsonne Málagas" width="140" height="140">
<h2>Portraitfotografie</h2>
<p>Am liebsten fotografiere ich Menschen. Hier findest du alle Infos und Downloads für gemeinsame Shootings. </p>
<p><a class="btn btn-default" href="Portraitfotografie.html" role="button">Erfahre mehr »</a></p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
<!-- FOOTER -->
<footer>
<p class="pull-right"><a href="#">Zurück nach oben</a></p>
<p>© 2017 Marco Vogel</p>
</footer>
</div><!-- /.container -->
<!-- Bootstrap-JavaScript
================================================== -->
<!-- Am Ende des Dokuments platziert, damit Seiten schneller laden -->
<!-- Nur, um unsere Platzhalter-Bilder zum Laufen zu bringen. Die nächste Zeile nicht wirklich kopieren! -->
<script src="../../assets/js/vendor/holder.min.js"></script>
<!-- IE10-Anzeigefenster-Hack für Fehler auf Surface und Desktop-Windows-8 -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
Leider ist der bootstrap.min.css-Code zu lang um ihn zu posten, ich hoffe einfach, dass der Fehler im HTML-Code liegt.
Vielen Dank schon mal im Voraus!
Viele Grüße
Marco
