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

Question

我一直在努力解决这个问题好几个小时。我已经搜索过，但我在网上找到的解决方案都没有帮助。因此，我想知道为什么我的Navbar列表不会垂直，也为什么“注销”和“我的帖子”当“作者”应该像应该选择的“作者”时，请不要下降。这是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的示例中使用了导航栏 ，但仍然没有下拉菜单

标签： htmlcssruby-on-railsbootstrap-4navbar

Answer 1

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

请参考：Bootstrap！

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

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

对于垂直导航栏列表，请尝试使用 bootstrap sidenav而不是导航栏

侧导航示例

我希望这是您正在寻找的答案.. :)