Question

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

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

Answer 1

你的挫折有问题。 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>

希望这有帮助！

Bootstrap导航栏无法在图像下方工作

1 个答案: