"移动" Bootstrap-Navbar无法正常工作 [英] "Mobile" Bootstrap-Navbar not working

问题描述

 <！DOCTYPE html> 
< html lang =de> 
< head> 
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/> 
<！ - < meta charset =utf-8> - > 
< meta http-equiv =X-UA-Compatiblecontent =IE = edge> 
< meta name =viewportcontent =width = device-width，initial-scale = 1> 
< title> Stadtfestlauf  - 开始< / title> 
< link rel =icontype =image / pnghref =favicon.png/> 
 
 <！ -  Bootstrap  - > 
< link href =css / bootstrap.min.css =stylesheet> 
< link href =css / style.css =stylesheet> 
 
 <！ -  HTML5 Shim和Respond.js IE8支持HTML5元素和媒体查询 - > 
 <！ - 警告：如果您通过file查看页面，Respond.js不起作用：//  - > 
<！ -  [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-inverserole =navigation> 
< div class =container-fluidid =navfluid> 
< div class =navbar-header> 
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =＃bs-example-navbar-collapse-1> 
< span class =sr-only>切换导航< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< / button> 
< a class =navbar-brandhref =./ Index.html> Stadtfestlauf< / a> 
< / div> 
< div class =collapse navbar-collapseid =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（Bootstrap的JavaScript插件必需） - > 
< script src =https://code.jquery.com/jquery.js>< / script> 
 <！ - 包含所有编译的插件（如下），或者根据需要包含单个文件 - > 
< 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 =containerid =pcontent> 
< div class =col-md-7> 
< div class =jumbotron> 
< h1> Hallo< / h1> 
< p>示例文本< / p> 
 
< div class =wrapper> 
< p>< a class =btn btn-primary btn-lgrole =buttonid =sendButtonhref =http://google.com/> Ich bin hier vollkommen Falsch< / A>< / p为H. 
< / div> 
< / div> 
< / div> 
 
< div class =col-md-5id =imgslide> 
< div id =carousel-example-genericclass =carousel slidedata-ride =carousel> 
 
< li data-target =＃carousel-example-genericdata-slide-to =0class =active>< / li> 
 
 
< / ol> 
< div class =carousel-inner> 
< div class =item active> 
< img src =Assets / img1.jpgalt =Stadtfestlaufid =img> 
< / div> 
< div class =item> 
< img src =Assets / img2.jpgalt =Stadtfestlaufid =img> 
< / div> 
< div class =item> 
< img src =Assets / img3.jpgalt =Stadtfestlaufid =img> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
< / body> 
< / html> 
  

以下是我的 index.html 。当我在手机上试用时，导航栏不起作用。我搜索了缺少div的标签。

解决方案

您需要将按钮的数据目标更改为您的 navbar-collapse 元素的ID。

此外，您的html缺少一些结束 < li> 的。

工作示例

将您的nav代码更改为：

 < nav class =navbar navbar-default navbar-inverserole =navigation> 
< div class =container-fluidid =navfluid> 
< div class =navbar-header> 
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =＃navigationbar> 
< span class =sr-only>切换导航< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< / button> 
< a class =navbar-brandhref =./ Index.html> Stadtfestlauf< / a> 
< / div> 
< div class =collapse navbar-collapseid =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> 
  

<!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>

Here's a my index.html. When I try it out on my mobile, the navigation bar doesn't work. I searched for missing div's tags.

解决方案

You need to change the data-targetof your button to the ID of your navbar-collapseelement.

Furthermore your html is missing some closing <li>'s.

Working Example

Change your nav code to this:

<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>

这篇关于"移动" Bootstrap-Navbar无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！