導航欄中的導航欄摺疊不起作用

當我縮小頁面大小時，我的導航欄會崩潰，但是一旦它變成頂部的「漢堡包」，它將突出顯示滾動條，但我根本無法點擊它。另外，我想知道爲什麼我的「漢堡包」出現在導航欄的右側，而不是左側。我想在左邊。我試圖改變類的類型和一些CSS，但我只是沒有看到它有什麼問題。導航欄中的導航欄摺疊不起作用

HTML：

<link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/stylesheet.css" rel="stylesheet"> 
</head> 
<body> 
<div class="row"> 
<nav class="navbar navbar-custom" role="navigation"> 
<div class="navbar-header-xs"> 
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse"> 
<span class="sr-only"> Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      </div> 
      <div class="collapse navbar-collapse" id="collapse"> 
      <ul class="nav navbar-nav"> 
       <li><a href="index.html"><img src= "images/QBlogo.png" /></a></li> 
       <li><a href="work.html">Work</a></li> 
       <li><a href="about.html">About</a></li> 
       <li><a href="skills.html">Skills</a></li> 
       <li><a href="contact.html">Contact</a></li> 
      </ul> 
      </div> 
     <nav> 
    </div> 


<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="js/bootstrap.min.js"</script>

CSS：

body { 
padding: 0px; 
margin-top: align; 
background: url(..images/QBhead.png) no-repeat center center fixed; 
background size: 100%; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
background-size: cover; 
-o-background-size: cover; 
} 
.navbar { 
margin-bottom: 0; 
max-width: 100%; 
max-height: 10%;  
} 
.navbar-custom { 
background-color:#CCE1F4; 
border-radius:2px; 
font-size: 22px; 
} 
.navbar-custom .navbar-brand { 
color: #2f4f7f; 
} 
.navbar-custom .navbar-nav > li > a { 
color: #2f4f7f; 
} 
.navbar-custom .navbar-nav > li > a:hover, 
.navbar-custom .navbar-nav > li > a:focus { 
color: #000000; 
background-color: transparent 
} 
.navbar-custom .navbar-toggle { 
border-color: #2f4f7f; 
} 
.navbar-custom .navbar-toggle:hover, 
.navbar-custom .navbar-toggle:focus { 
background-color: #2f4f7f; 
} 
.navbar-custom .navbar-toggle .icon-bar { 
background-color: #2f4f7f; 
} 
.navbar-nav > li{ 
align: left; 
padding-left:25px; 
padding-right:25px; 
padding-top: 5px; 
}

來源

2015-08-27 QBuno

沒有什麼撥錯用導航菜單

Fiddle

唯一的問題是缺少結束標記>這裏

<script src="js/bootstrap.min.js"</script>

應該

<script src="js/bootstrap.min.js"></script>

來源

2015-08-27 19:58:06 Shehary

試過了..它工作謝謝！我以爲我也檢查過。 – QBuno

你是最受歡迎的，這沒什麼大不了的，有時這些小東西很容易被遺漏，所以瀏覽器控制檯是你最好的朋友，總是檢查控制檯是否有錯誤。 – Shehary

你可以嘗試和玩下獲得左側的「漢堡包」 .. 。在你的CSS中，試試

.navbar-custom .navbar-toggle {  
    float: left; 
    margin-left:20px; 
    border-color: #2f4f7f; 
}

然而，它會推出菜單。

來源

2015-08-27 20:57:47

謝謝，以及：） – QBuno

導航欄中的導航欄摺疊不起作用

回答

相關問題