Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
298 views
in Technique[技术] by (71.8m points)

html - "Mobile" Bootstrap-Navbar not working

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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.

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...