내비게이션 막대의 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

는 그 짓을하지만 난 개인적으로 한 번 또는 두 번이 일을 잊어 버린 알고있는 문제는 여전히 당신이 jquery'와'bootstrap.js''에로드를 확인할 수 있습니다 – dominicbure

을 지속됩니다. – harryparkdotio

또한 상당히 심각한 문제입니다. '

'다음의 첫 번째 div는'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 태그가 반응이 없습니다

답변

관련 문제