微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

html – “Mobile”Bootstrap-Navbar不工作

<!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&uuml;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的标签.

解决方法

您需要将您的按钮的数据更改为您的导航栏 – 折叠元素的ID.

此外,您的html缺少一些关闭< li>的.

Working Example

将您的导航代码更改为:

<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="#navigationbar">
               <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&uuml;ckblick</a></li>
               <li><a href="./Wettbewerb.html">Wettbewerb</a></li>    
               <li><a href="./anmelden.html">Anmelden</a></li>
               <li><a href="./sponsoren.html">Sponsoren</a></li>
           </ul>
      </div><!-- /.navbar-collapse -->
   </div><!-- /.container-fluid -->
</nav>

原文地址:https://www.jb51.cc/html/230463.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐