html - 为什么我的 Rails 应用程序上的 Bootstrap 导航栏是垂直的而不是水平的？

Question

我有一个 Rails 应用程序，在 bootstrap 上制作的导航栏应该是水平的，但它是垂直的。这是应用程序的链接 https://shielded-wave-99449.herokuapp.com/我已经检查了这里的其他文章(见下文)，但他们没有解决问题。

bootstrap navbar displays vertically instead of horizontally

Bootstrap navbar appearing vertically instead of horizontal

Bootstrap navbar is displaying vertically instead of horizontally

navbar is vertical instead of horizontal

我正在学习教程并使用与他相同的代码并且他的导航栏正在运行。

这里是引用教程的 GitHub 存储库的链接:https://github.com/StephenFiser/FrogBlog/blob/master/app/views/layouts/_navbar.html.erb

导航栏的代码是局部的，有 2 个下拉和一个正常。它们都垂直显示。

这是我的导航栏部分 _navbar.html.erb

#----------dropdown navbar menu code----------

<div class="collapse" id="exCollapsingNavbar">
  <div class="collapse-bg p-a-1">
    <div class='card'>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">
          <%= link_to 'Blog', root_path, class: "nav-link #{yield(:blog_active)}" %>
        </li>
        <li class="list-group-item">
          <%= link_to 'About', about_path, class: "nav-link #{yield(:about_active)}" %>
        </li>
        <li class="list-group-item">
          <%= link_to 'Contact', contact_path, class: "nav-link #{yield(:contact_active)}" %>
        </li>
        <% if author_signed_in? %>
          <li class="list-group-item">
            <%= link_to 'My posts', authors_posts_path, class: "nav-link #{yield(:author)}" %>
          </li>
          <li class="list-group-item">
            <%= link_to 'Logout', destroy_author_session_path, method: :delete, class: "nav-link" %>
          </li>
        <% end %>
      </ul>
    </div>
  </div>
</div>


#---------------normal non-dropdown navbar code-----------

<nav class="navbar navbar-light bg-faded">
  <div class='container'>
    <a class='navbar-brand' href='/'>
      Frog<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 author-nav">
          <a class="nav-link dropdown-toggle <%= yield(:author) %>" href="#" id="navbarDropdownMenuLink"
             data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             <%= image_tag(current_author.gravatar_image_url) %>
             <%= current_author.display_name %>
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <%= link_to 'My posts', authors_posts_path, class: "dropdown-item" %>
            <%= link_to 'Account', authors_account_path, class: "dropdown-item" %>
            <%= link_to 'Logout', destroy_author_session_path, method: :delete, class: "dropdown-item" %>
          </div>
        </li>
      <% end %>
    </ul>
  </div>
</nav>

看来导航栏的容器太高了，需要调整。那么我应该尝试更换容器吗？ (如果是这样，我如何在 rails 上找到这个 css？)或者我可以添加另一个 Bootstrap 类来使导航栏垂直吗？

Answer 1

如果您使用的是 Bootstrap 4，那么您应该使用它提供的组件。现在你似乎在试图重新发明轮子，这是你挣扎的主要原因。您根本没有使用 Bootstrap 类和组件。这就是为什么你没有得到预期的结果。

这是 Bootstrap 4 导航栏的工作代码片段:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

因此，您的 Rails 代码需要为该示例导航栏生成 HTML 输出才能正常工作。

首先，调整该 HTML 模板以生成您想要的结果，然后调整您的 Rails 代码以生成该 HTML。

引用:

https://getbootstrap.com/docs/4.0/components/navbar/