Question

所以我没有实际菜单打开的问题，我只是有一个问题，而菜单中的数据无法看到，因为它的内容，阻碍视图 - 我会认为崩溃下拉菜单将放在现有内容上。

这是我目前的设置，将在 jsfiddle 之后总结：

<div id="header" style="height: 200px; background-image: url({{ header_image }})" class="background-image">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-partition" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#!/home">{{ site_logo_name }}</a>
      </div>

      <div class="collapse navbar-collapse" id="collapse-partition">
        <ul class="nav navbar-nav">
          <!--bootstrap standard link and dropdown-->
        </ul>
      </div>
    </div>
  </nav>
</div>

jsfiddle - 我不太清楚为什么下拉列表工作存在问题，而且当崩溃的大小自动降低时，这就是我的代码。

这是我服务器上的问题的GIF gyazo gif

Answer 1

您很可能已将元素放置在导航栏下方，并且由于导航栏包含在另一个元素中，这可能会导致问题，但如果不查看完整代码则很难判断。这可以通过将navbar-static-top类添加到导航栏或向#header添加位置并为其提供比标题下方元素更高的z-index来解决：

#header{
  position:relative;
  z-index:1;
}

如果z-index为1不够高，请尝试使用更高的数字直到它起作用。

这是一个工作小提琴Working Fiddle Demo

P.S。您的小提琴无法正常工作，因为您忘记在引导程序之前加载jquery＆＃39; s js

Bootstrap无法看到折叠菜单内容的原因

1 个答案: