導航欄中的Li標籤沒有響應

我有一個導航欄，當我縮小屏幕尺寸時，列表項重疊到導航的左側，其中有徽標而不是保持其位置。這裏是HTML代碼：導航欄中的Li標籤沒有響應

<header> 

<div class="navbar navbar-default navbar-static-top"> 
<div class="container-fluid"> 
<div class="navbar-header"> 
    <button class="navbar-toggle" data-target="navbar-collapse" data-toggle="collapse" type="button">       
    <span class="icon-bar"></span> <span class="icon-bar"> </span> 
    <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="index.html"> 
    <img id="indexlogo" width="20%" alt="logo" src="img/siluxLogo1.png" > 
    </a> 
</div> 
<div class="navbar-collapse collapse">       

    <ul class="nav navbar-nav navbar-right" >       
    <li >         
    <a>hello and welcome</a> 
    </li> 
    <li > 
    <a id="date"></a> <!-- JS which displays date and year --> 
    </li>        
    <li >        
    <a id="feed"></a> <!-- RSS feed ticker --> 
    </li> 
    <li class="active"> 
    <a href="index.html">Home</a> 
    </li> 
    <li> 
    <a href="about.html">About Us</a> 
    </li>       
    <li> 
    <a href="contact.html">Contact</a> 
    </li> 
    </ul> 
</div>     
</div> 
</div> 
</header><!-- end header -->

有人可以請指出我要去哪裏錯或我失蹤。我有視口元標記，頁面的其他部分是響應式的。

來源

2016-09-22 dominicbure

在無序列表之前添加一個ID也可以修復它。

<div id="navbar" class="navbar-collapse collapse">...</div>

，然後設置data-target="#navbar"

此外，你應該將該類添加到您的按鈕。 class="collapsed"

下面是我自己的網站，其中工程

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

爲例，用戶也不必container-fluid

// DROP IN THIS AND TELL ME IF IT WORKS

<!-- Navigation --> 
    <nav class="navbar navbar-default navbar-fixed-top mega navbar-trans navbar-fw"> 
     <div class="navbar-header page-scroll"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
     </div> 

     <!-- Navbar Links --> 
     <div id="navbar" class="navbar-collapse collapse page-scroll navbar-right"> 
      <ul class="nav navbar-nav"> 
       <li><a href="#home">Home<span class="sr-only"></span></a></li> 
       <li><a href="#about">About<span class="sr-only"></span></a></li> 
       <li><a href="#services">Services<span class="sr-only"></span></a></li> 
       <li><a href="#portfolio">Portfolio<span class="sr-only"></span></a></li> 
       <li><a href="#pricing">Pricing<span class="sr-only"></span></a></li> 
       <li><a href="#contact">Contact<span class="sr-only"></span></a></li> 
      </ul> 
     </div> 
    </nav>

來源

2016-09-22 09:16:22 harryparkdotio

我已經做到了，但問題仍然存在 – dominicbure

你能驗證'jquery'和'bootstrap.js'你裝，因爲我知道我個人都忘記了這樣做一次或兩次。 – harryparkdotio

另外，相當大的問題。「

」之後的第一個div應該是「

下面的Coppy代碼並粘貼您的編輯器。你試試吧。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Case</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> 
</head> 
<body> 
<header> 
    <div class="navbar navbar-default navbar-static-top"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
    <button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" type="button">       
    <span class="icon-bar"></span> <span class="icon-bar"> </span> 
    <span class="icon-bar"></span> 
    </button> 
<a class="navbar-brand" href="index.html"> 
    <img id="indexlogo" width="20%" alt="logo" src="img/siluxLogo1.png" > 
</a> 
</div> 
<div class="navbar-collapse collapse">       

<ul class="nav navbar-nav navbar-right" >       
    <li >         
    <a>hello and welcome</a> 
    </li> 
    <li > 
<a id="date"></a> <!-- JS which displays date and year --> 
</li>        
<li >        
<a id="feed"></a> <!-- RSS feed ticker --> 
</li> 
<li class="active"> 
<a href="index.html">Home</a> 
</li> 
<li> 
<a href="about.html">About Us</a> 
</li>       
<li> 
<a href="contact.html">Contact</a> 
</li> 
</ul> 
</div>     
</div> 
</div> 
</header><!-- end header --> 
</body> 
</html>

來源

2016-09-22 09:33:22

導航欄中的Li標籤沒有響應

回答

相關問題