Bootstrap集成ROR应用问题：导航栏无法横向排列呈堆叠状态

我之前也踩过这个坑！Bootstrap导航栏没横向排列反而堆叠，通常是几个常见原因导致的，咱们一步步来排查修复：

• 先确认Bootstrap的JS依赖是否正确引入
  Bootstrap的响应式导航栏需要jQuery（或Popper.js，新版本Bootstrap）和自身JS文件的支持。如果用的是传统asset pipeline：
  在app/assets/javascripts/application.js里确保有这些引入：

  //= require jquery3
  //= require popper
  //= require bootstrap
  

  要是用的是Rails 7+的Import Maps，得先在config/importmap.rb里pin相关包，再在application.js里导入：

  import "@hotwired/turbo-rails"
  import "bootstrap"
  

• 补全响应式导航栏的折叠结构
  你的代码里缺少了Bootstrap导航栏的折叠容器和触发按钮，这会导致菜单在所有屏幕尺寸下都堆叠。修改后的完整代码应该是这样：

  <nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <%= link_to "Smart Health", root_path, class: "navbar-brand" %>
        <!-- 小屏幕下的导航触发按钮 -->
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav-collapse" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <!-- 包裹导航菜单的折叠容器 -->
      <div class="collapse navbar-collapse" id="main-nav-collapse">
        <ul class="nav navbar-nav">
          <li><%= link_to "Register Doctor", sign_up_path %></li>
          <% if signed_in? %>
            <li><%= link_to "Sign out", sign_out_path, method: :delete %></li>
          <% end %>
        </ul>
      </div>
    </div>
  </nav>
  

  这样设置后，大屏幕下菜单会横向排列，小屏幕下会自动折叠成按钮。

• 检查Bootstrap CSS是否正确加载
  确保你的样式文件里正确引入了Bootstrap。如果用的是SCSS，在app/assets/stylesheets/application.css.scss里添加：

  @import "bootstrap";
  

  避免自定义CSS不小心覆盖了.navbar-nav或.navbar的默认样式（比如误设了display: block或者width: 100%），可以用浏览器开发者工具（F12）查看元素样式，排查冲突规则。

内容的提问来源于stack exchange，提问作者user9409047