ナビゲーションバーのLiタグが応答しません

私はナビゲーションバーを持っています。画面サイズを小さくすると、リストアイテムは、その位置に保持される代わりにロゴがあるナビゲーションの左側に重なります。ナビゲーションバーの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'ではなく'

下のコードを編集して、エディタを貼り付けてください。正常に動作してください。

<!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タグが応答しません

答えて

関連する問題