Bootstrap导航栏在移动（窄屏幕）视图中扩展不正确

我正在关注Bootstrap视频教程。但是，我的引导程序导航栏扩展并出现在网站徽标旁边的移动（窄屏幕）中。相关的图片：Bootstrap导航栏在移动（窄屏幕）视图中扩展不正确

1 - Narrow screen view with menu expanded

在最正常的网站应该出现在标识。

2 - Example of a Bootstrap website that has the correctly working mobile menu

这是我的代码

@import url(https://fonts.googleapis.com/css?family=Share+Tech+Mono); 
 

 
body { 
 
    font-family: 'Share Tech Mono', monospace; 
 
    background-color: #fff; 
 
} 
 

 
.navbar { 
 
    padding-top: 30px;  
 
    font-size: 26px; 
 
    font-size-adjust: auto; 
 
    background-color: antiquewhite; 
 
} 
 

 
.navbar-nav > li { 
 
    padding-left: 15px; 
 
} 
 

 
.icon-bar { 
 
    background-color: #000; 
 
} 
 

 
.row { 
 
    padding: 10px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <title>My website</title> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
     <link href="css/bootstrap.min.css" rel="stylesheet"> 
 
     <link href="css/bootstrap-theme.min.css" rel="stylesheet"> 
 
     <link href="css/styles.css" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 
     <div class="navbar navbar-static-top"> 
 
      <div class="container"> 
 
       <a class="navbar-brand" href="">My Logo</a> 
 
       
 
       <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button> 
 

 
       <div class="collapse navbar-collapse navHeaderCollapse"> 
 
        <ul class="nav navbar-nav navbar-right"> 
 
         <li><a href="#">Blog</a></li> 
 
         <li><a href="#">Contact</a></li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     
 
     <!-- Main section of homepage --> 
 
     <div class="container-fluid"> 
 
      <div class="row"></div> <div class="row"></div> <div class="row"></div> 
 
      <div class="row"></div> <div class="row"></div> 
 
     </div> 
 
     
 
     <script src="js/jquery-1.12.1.min.js"></script> 
 
     <script src="js/bootstrap.min.js"></script> 
 
    </body> 
 
</html>

谁能帮助解决这一问题？

来源

2016-03-12 Advait Junnarkar

你忘了包装，以集团品牌和按钮：

<div class="navbar-header"> 
    <button class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="">My Logo</a> 
</div>

jsfiddle-example

来源

2016-03-12 07:48:22

伴侣，这是辉煌！这让我很感动。我会upvote你的答案，如果我有15代表:) –

Bootstrap导航栏在移动（窄屏幕）视图中扩展不正确

回答

相关问题