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

【问题标题】：My bootstrap navbar list is vertical not horizontal我的引导导航栏列表是垂直的而不是水平的
【发布时间】：2018-10-14 12:36:11
【问题描述】：

我已经尝试解决这个问题好几个小时了。我已经搜索过，但我在网上找到的解决方案都没有帮助。所以我想知道为什么我的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 的情况下，我还使用了此示例中的导航栏仍然没有下拉菜单

【问题讨论】：

标签： html css ruby-on-rails bootstrap-4 navbar

【解决方案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

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

【讨论】：