Question

我已经尝试了好几个小时。我已经搜索过，但是我在网上找到的所有解决方案都没有帮助。所以我想知道为什么我的导航栏列表没有垂直显示，为什么当选择“作者”时为什么“注销”和“我的帖子”没有下拉。这是html：

<nav class="navbar navbar-light bg-faded">
  <div class="container">
    <a href="/" class="navbar-brand">
      Bella<span class="light">blog</span>
    </a>
    <button class="navbar-toggler hidden-sm-up pull-xs-right" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
      &#9776;
    </button>
    <ul class="nav navbar-nav pull-sm-right hidden-xs-down">
      <li class="nav-item">
        <%= link_to 'Blog', root_path, class: "nav-link #{yield(:blog_active)}" %>
      </li>
      <li class="nav-item">
        <%= link_to 'About', about_path, class: "nav-link #{yield(:about_active)}" %>
      </li>
      <li class="nav-item">
        <%= link_to 'Contact', contact_path, class: "nav-link #{yield(:contact_active)}" %>
      </li>
      <% if author_signed_in? %>
        <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Author
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <li>
            <%= link_to 'My Posts', authors_posts_path, class: "dropdown-item #{yield(:author)}" %>
          </li>
        <li>
          <%= link_to 'Logout', destroy_author_session_path, method: :delete, class: "dropdown-item" %>
        </div>
      </li>
      <% end %>
    </ul>
  </div>
</nav>

这是scss：

.navbar {
  border-radius: 0;
  margin-bottom: 20px;
  background-color: gray;
  .navbar-brand {
    font-weight: bolder;
    color: $accent-color;
    .light {
      font-weight: 300;
      color: white;
    }
  }
  .navbar-expand-* {
    outline: none;
  }
  .nav-link {
    color: $light-primary-color !important;
    &.active {
      color: $text-primary-color !important;
    }
  }
}

.collapse-bg {
  padding: 0 !important;
  .card {
    margin-bottom: 0;
    border-radius: 0;
    border: none;
  }
}


.collapse-bg .card .list-group-item {
  padding: 0;
  border-radius: 0 !important;
  border-color: black;
  a {
    background-color: #1a1a1a;
    color: #bdc3c7;
    width: 100%;
    height: 100%;
    padding: 10px;
    &:active {
      color: white;
      border-bottom: none;
    }
  }
}

正在播放的不仅是我的代码。在给定https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp的情况下，我还使用了导航栏而且仍然没有下拉列表

Answer 1

我想您应该检查HTML文件中的引导CSS和js导入

请refer : Bootstrap！

用于显示和定位的下拉菜单，工具提示和弹出窗口（需要Popper.js）

请确保已导入所有（bootstrap.min.css，jquery-3.3.1.slim.min.js，popper.min.js，bootstrap.min.js）引导文件正确。

对于垂直导航栏列表，请尝试使用引导 sidenav 代替导航栏

sidenav example

我希望这是您正在寻找的答案..：）

我的引导导航列表是垂直的而不是水平的

1 个答案: