可能是 Bootstrap 框架导致“朋友”导航项无法正确显示

Question

我是 Bootstrap 的新手，混合使用 Bootstrap 4 和 Bootstrap 5 代码。我试图在导航栏中显示“朋友”和“关于我们”链接，但它们甚至都没有出现 密码是

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<%= link_to 'Friend App', root_path, class:"navbar-brand" %>
 
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <%= link_to "About Us", home_about_path, class:"nav-link" %>
        </li>
       
        <li class="nav-item">
          <%= link_to "Friends", friends_path, class:"nav-link" %>
        </li>
        
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

我检查过

1. friends_path 是在我的 routes.rb 文件中定义的。我确定它与您应用程序中“朋友”页面的正确路径匹配。

2. 我确保 friends_path 返回正确的 URL。您可以通过打开浏览器的控制台并检查网络请求以查看是否请求了正确的 URL 来检查这一点。

但是除了导航栏中的朋友应用程序之外什么都没有出现

它必须看起来像这样

谢谢你的时间

Answer 1

显然是一个空间问题，在像素更多的浏览器中工作正常，只需最大化它。您可以通过将

<%= link_to "About Us", home_about_path, class:"navvar-brand" %>

放在Friend App

旁边来修复它的任何方法

所以最后的标题保持这样

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

<%= link_to 'Friend App', root_path, class:"navbar-brand" %> 
<%= link_to "About Us", home_about_path, class:"navvar-brand" %>

<button class="navbar-toggler" type="button" ... and so on