<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--<meta charset="utf-8"> -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Stadtfestlauf - Start</title>
<link rel="icon" type="image/png" href="favicon.png" />
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]-->
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<!--script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="avcontent">
<nav class="navbar navbar-default navbar-inverse" role="navigation">
<div class="container-fluid" id="navfluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="./Index.html">Stadtfestlauf</a>
</div>
<div class="collapse navbar-collapse" id="navigationbar">
<ul class="nav navbar-nav">
<li class="active"><a href="./Index.html">Startseite</a></li>
<li><a href="./Rueckblick.html">Rückblick</a></li>
<li><a href="./Wettbewerb.html">Wettbewerb</a>
<li><a href="./anmelden.html">Anmelden</a>
<li><a href="./sponsoren.html">Sponsoren</a>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode(
"@-ms-viewport{width:auto!important}"
)
);
document.getElementsByTagName("head")[0].
appendChild(msViewportStyle);
}
</script>
<div class="container" id="pcontent">
<div class="col-md-7">
<div class="jumbotron">
<h1>Hallo</h1>
<p>sample text</p>
<div class="wrapper">
<p><a class="btn btn-primary btn-lg" role="button" id="sendButton" href="http://google.com/">Ich bin hier vollkommen Falsch</a></p>
</div>
</div>
</div>
<div class="col-md-5" id="imgslide">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="Assets/img1.jpg" alt="Stadtfestlauf" id="img">
</div>
<div class="item">
<img src="Assets/img2.jpg" alt="Stadtfestlauf" id="img">
</div>
<div class="item">
<img src="Assets/img3.jpg" alt="Stadtfestlauf" id="img">
</div>
</div>
</div>
</div>
</div>
</body>
</html>这是我的index.html，当我在移动的上试用时，导航栏不工作，我搜索了丢失的div标签。
5条答案
按热度按时间uqcuzwp81#
您需要将按钮的
data-target更改为navbar-collapse元素的ID。此外，您的html缺少一些结束
<li>。请将您的导航代码更改为：
k2fxgqgv2#
在导入bootstrap之前导入jQuery也是必要的，如果顺序不对，jQuery将无法工作。
huus2vyu3#
对我来说，解决方案是添加
ndasle7k4#
确保在头部分中将jQuery脚本放在Bootscript链接之前，即（按以下顺序）
hivapdat5#
来自Bootstrap API文档的2023年解决方案
假设你的导航标签没有语法错误...
把这段代码放在HTML文件的头部，它“插入”了 jQuery 和 Popper，Bootstrap依赖于它们来使“移动的”导航栏工作。
Reference