引导导航栏在图像下方不起作用答案

【问题标题】：Bootstrap navbar not working below an image引导导航栏在图像下方不起作用
【发布时间】：2017-03-19 07:41:24
【问题描述】：

</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>

在当前表单中，导航栏中的链接不起作用（甚至无法单击它们）。有两种方法可以让这项工作再次发生：我可以删除图像（导航栏位于页面顶部并且可以正常工作）或者我可以更改

header class="navbar navbar-inverse"

进入

header class="navbar navbar-fixed-top navbar-inverse"

（导航栏然后位于页面顶部的图像上方，并且再次正常工作）。如何使导航栏也在图像下方工作？最终结果应该是导航栏正上方的幻灯片（我只是假设一旦我解决了图像问题，导航栏也将在幻灯片下方工作。）

【问题讨论】：

标签： twitter-bootstrap ruby-on-rails-5

【解决方案1】：

你的 Mar-up 出了点问题。 class="navbar navbar-inverse" 带有导航标签而不是标题标签。删除标题标签并将其与<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>

希望这会有所帮助！

【讨论】：