"移动"Bootstrap-Navbar不能正常工作

Question

"移动"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>

Run Code Online (Sandbox Code Playgroud)

这是我的index.html.当我在手机上试用时,导航栏不起作用.我搜索了丢失div的标签.

Answer 1

Seb*_*lia 42

您需要将data-target按钮更改为navbar-collapse元素的ID .

此外,你的html缺少一些结束<li>.

工作实例

将您的导航代码更改为:

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

Run Code Online (Sandbox Code Playgroud)

Answer 2

Dou*_*phy 19

在导入引导程序之前导入jQuery也是必要的,不按顺序它将不起作用.它应该如下所示:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Run Code Online (Sandbox Code Playgroud)

我知道这是因为我犯了错误而且(简单地)让我发疯了.代码是对的,我确定!我通过取消一块一块代码(通常是通过评论)和测试来调试它,使它变得更简单和简单,直到我打破它(然后我知道在哪里看).然后,由于需要很长时间才能找到,我记得那段旅程.:) (3认同)
谢谢，我被告知没有愚蠢的问题，所以这里是：你如何知道这种事情，以及你将如何调试它？ (2认同)

Answer 3

Ale*_*der 6

对于我的解决方案是添加

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，8 月前
查看次数：	81608 次
最近记录：	5 年，11 月前