Question

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

我正在学习一个教程并拥有与他相同的代码，并且他的导航栏正在运行。

以下是教程的GitHub存储库的链接，供参考：https://github.com/StephenFiser/FrogBlog/blob/master/app/views/layouts/_navbar.html.erb

导航栏的代码是部分的，有2个下拉列表和1个法线。它们都是垂直显示的。

这是我的导航栏部分_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？）或者我是否可以添加另一个引导程序类来使导航栏垂直？

Answer 1

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

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

＆＃13;

<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>

＆＃13;

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

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

参考：

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

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

1 个答案: