0
Ich bin ein Bootstrap-Neuling. Auf kleinen Geräten gibt es keine Schaltfläche zum Anzeigen der Menüelemente. Wenn ich auf die obere rechte Seite tippe, werden die Menüpunkte angezeigt. Was vermisse ich?Warum wird auf kleinen Geräten mit der Bootstrap-Navigationsleiste keine Schaltfläche angezeigt?
index.html
<!DOCTYPE html>
<html lang="en" data-ng-app="wtApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> -->
<meta name="fragment" content="!">
<meta name="google-site-verification" content="k-yDmol0MzU1QXaTTGlhNa_gVLzUs" />
<title>Writer's Tryst, where authors, publishers, producers, agents meet.</title>
<meta name="description" content="A better way for writers to find publishers, producers and agents" />
<meta name="keywords" content="Writer's Tryst, authors, publishers, producers, agents, writers, genres, manuscripts, books, find, meet." />
<base href="/" />
<link href='https://fonts.googleapis.com/css?family=Lobster+Two:700italic' rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css.map">
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/normalize-min.css" />
<link rel="stylesheet" href="css/bootstrap-dialog.css" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/shares.css" />
<link rel="shortcut icon" href="img/icons/writers-tryst.png" />
</head>
<body data-ng-controller="mainController" >
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-79802711-1', 'auto');
ga('send', 'pageview');
</script>
<header>
<nav id="navbar" class="navbar navbar-light navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Writers-Tryst">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div style="display: inline-block">
<a class="navbar-brand" href="#"><img id="logo" src="img/writers-tryst-logo-min.png" alt="logo" /></a><br/><br/>
<div id="shares" class="row">
<!-- Twitter -->
<a href="http://twitter.com/share?url=writers.tryst.ron-tornambe.com&text=<TEXT>&via=<VIA>" target="_blank" title="twitter" class="share-btn twitter">
<i class="fa fa-twitter"></i>
</a>
<!-- Facebook -->
<a href="http://www.facebook.com/sharer/sharer.php?u=http://writers.tryst.com" target="_blank" title="facebook" class="share-btn facebook">
<i class="fa fa-facebook"></i>
</a>
<!-- StumbleUpon (url, title)
<a href="http://www.stumbleupon.com/submit?url=http://writers.tryst.com&title=<TITLE>" target="_blank" class="share-btn stumbleupon" title="stumble-upon">
<i class="fa fa-stumbleupon-circle"></i>
</a> -->
<!-- Reddit (url, title)
<a href="http://reddit.com/submit?url=http://writers.tryst.com&title=<TITLE>" target="_blank" class="share-btn reddit" title="reddit">
<i class="fa fa-reddit-square"></i>
</a> -->
<!-- LinkedIn -->
<a href="http://www.linkedin.com/shareArticle?url=http://writers.tryst.com&title=<TITLE>&summary=<SUMMARY>&source=<SOURCE_URL>" target="_blank" title="linked-in" class="share-btn linkedin">
<i class="fa fa-linkedin"></i>
</a>
<!-- Google Plus -->
<a href="https://plus.google.com/share?url=writers.tryst.ron-tornambe.com" target="_blank" title="google+" class="share-btn google-plus">
<i class="fa fa-google-plus"></i>
</a>
</div>
</div>
</div> <!--navbar-header-->
<div class="collapse navbar-collapse" id="Writers-Tryst">
<ul class="nav navbar-nav">
<li class="active"><a id="homepage" href="#/"><i class="acctive glyphicon glyphicon-home fa fa-home"></i> Home</a></li>
<li><a href="#writers" id="writers-link" class="fa fa-book" > Writers</a></li>
<li><a href="#enablers" id="enablers-link" class="fa fa-thumbs-o-up" > Enablers</a></li>
<li><a href="#about" class="fa fa-info-circle"> About</a></li>
<li><a href="#privacy" class="fa fa-user-secret"> Privacy/Rules</a></li>
<li><a href="#contact" class="fa fa-envelope-o"> Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a id="login" href="#log-in"><i class="fa fa-sign-in"></i> Log-In</a></li>
<li><a id="accounts-link" href="#accounts"><i class="fa fa-user hidden"></i> Create Account</a></li>
<li class="dropdown" data-toggle="popover" data-trigger="hover" data-placement="bottom" >
<button class="btn btn-custom-primary dropdown-toggle fa fa-user" style="margin-top: 8px; color: white;" data-html="true" type="button" id="user-dropdown-link" data-toggle="dropdown"><span class="caret"></span></button></a>
<ul class="dropdown-menu" role="menu" data-aria-labelledby="create-account-link">
<li><a id="update-profile" href="#update-profile" class="fa fa-database"> Update profile</a></li>
<li><a id="manage-uploads" href="#manage-uploads" class="fa fa-book"> Manage uploads</a></li>
<li><a id="review-submissions" href="#review-submissions" class="fa fa-book"> Review Submissions</a></li>
<li><a id="update-submissions" href="#update-submissions" class="fa fa-book"> Update Reviews</a></li>
</ul>
</li>
<li ><a id="reset-pwd-link" href="#reset-pwd"></a></li>
</ul>
</div> <!--navbar-collapse-->
</div> <!--container fluid-->
</nav>
</header>
<div>
<div id="message" class="alert m-t-10 m-b-10"></div>
<div id="main" class="content container">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div data-ng-view></div>
</div>
<footer class="panel panel-default panel-transparent">
<div id="foot1" class="text-right small">© 2016 Ronald Tornambe, Inc.</div>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-dialog.js"></script>
<script defer src="js/recaptcha.js"></script>
<script async defer src="https://use.fontawesome.com/9f2a0d923f.js"></script>
<script defer src="js/pages.js"></script>
<script defer src="js/common.js"></script>
<script>
$("#drop-toggle-1").on("click", function (e) {
e.preventDefault();
});
$("#accounts-link").addClass("hidden");
$(function() {
$("#review-submissions").on("mousedown", function() {
sessionStorage.setItem("submissions", "review");
});
$("#update-submissions").on("mousedown", function() {
sessionStorage.setItem("submissions", "update");
});
setupPage();
});
</script>
</body>
</html>
Mögliches Duplikat von [Bootstrap Menu Collapse working, aber zeigt keine Symbole] (http://stackoverflow.com/questions/38407131/bootstrap-menu-collapse-working-but-isnt-showing-icons) – vanburen