2017-03-18 13 views
0
</head> 
<body> 

    <div class="slideshow-container"> 

    <div class="test"> 
     <%= image_tag("img_mountains_wide.jpg", :style => "width:100%") %> 
    </div> 

    </div> 

    <header class="navbar navbar-inverse"> 
    <div class="header"> 
     <nav> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><%= link_to "Homepage", root_path %></li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
       About <b class="caret"></b> 
      </a> 
       <ul class="dropdown-menu"> 
       <li><%= link_to "test1", test_path %></li> 
       <li><%= link_to "test2", test2_path %></li> 
       </ul> 
      </li> 
       <li><%= link_to "Contact", contact_path %></li> 
       <% if logged_in? %> 
       <li><%= link_to "Log out", logout_path, method: "delete" %></li> 
       <% else %> 
       <li><%= link_to "Log in", login_path %></li> 
       <% end %> 
      </ul> 
     </nav> 
    </div> 
</header> 

<div id="main-body"> 
    <%= yield %> 
</div> 

</body> 
</html> 

現在のフォームでは、navbarのリンクが機能しません(クリックすることはできません)。私は再びこの作業を行うことができますどのように2つの方法があります。私は、画像を削除することができます(ナビゲーションバーは、ページの一番上に、その後で、正常に動作します)または私は=「ナビゲーションバーナビゲーションバー-逆」ブートストラップnavbarが画像の下で動作しません

ヘッダークラ​​スを変更することができます(ナビゲーションバーがページの上部に画像の上に、その後で、再び正常に動作)

ヘッダクラス=「ナビゲーションバーナビゲーションバー固定トップナビゲーションバー、逆」

。どのようにして画像の下にナビバーを表示させることができますか?最終結果は、navbarの直上でスライドショーになっているはずです(画像の問題を修正すると、navbarもスライドショーの下で動作すると仮定しています)。

答えて

0

あなたのマラウイには問題がありました。 class="navbar navbar-inverse"は、ヘッダータグではなく、navタグを使用します。ヘッダータグを削除し、<nav>タグで使用すると正常に動作します。

の作業例

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 

 
<body> 
 

 
    <div class="slideshow-container"> 
 

 
    <div class="test"> 
 
     <img src="https://www.w3schools.com/css/trolltunga.jpg" style = "width:100%;"> 
 
    </div> 
 

 
    </div> 
 

 
    <nav class="navbar navbar-inverse"> 
 
    <div class="header"> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="www.google.com">home</a></li> 
 
      <li class="dropdown"> 
 
      <a href="https://www.google.co.in" class="dropdown-toggle" data-toggle="dropdown"> 
 
       About <b class="caret"></b> 
 
      </a> 
 
       <ul class="dropdown-menu"> 
 
       <li><a href="www.google.com">test1</a></li> 
 
       <li><a href="www.google.com">test2</a></li> 
 
       </ul> 
 
      </li> 
 
       <li><a href="www.google.com">contact</a></li> 
 
       <li><a href="www.google.com">login</a></li> 
 
       
 
      </ul> 
 
     
 
    </div> 
 
</nav> 
 
<div id="main-body"> 
 
</div> 
 

 
</body>

この情報がお役に立てば幸い!

関連する問題