Ruby on Rails中Bootstrap Jumbotron背景不显示问题求助

Bootstrap 5 已经移除了Jumbotron组件，这个组件是Bootstrap 4及更早版本的专属特性。你通过gem引入的是Bootstrap 5.2.2，代码里的.jumbotron类自然不会匹配到任何样式规则，所以没有灰色背景；而你用CDN引入的Bootstrap 4.3.1包含该组件，因此能正常显示效果。

方案1：改用Bootstrap 5的替代实现（推荐） #

Bootstrap 5官方建议用容器+工具类组合来模拟Jumbotron的效果，示例代码如下：

<div class="container py-5 bg-light rounded-3">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

• bg-light 实现浅灰色背景
• py-5 控制上下内边距，模拟原组件的垂直空间
• rounded-3 实现圆角效果（可选）
• display-4 是Bootstrap 5的标题尺寸类，对应原Jumbotron的标题样式

方案2：降级Bootstrap gem到4.x版本 #

如果你一定要保留.jumbotron类的写法，可以按以下步骤操作：

1. 打开项目根目录下的Gemfile，将gem 'bootstrap'修改为：

gem 'bootstrap', '~> 4.3.1'

2. 执行命令更新依赖：

bundle install

3. 确保app/assets/stylesheets/application.scss里的导入顺序正确（Bootstrap 4需要先导入sprockets）：

@import "bootstrap-sprockets";
@import "bootstrap";

4. 重启Rails服务器

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