如何通过SASS限制Bootstrap 5容器的最大宽度？

你用rails new -c bootstrap创建的项目已经集成了Bootstrap的SASS支持，直接通过覆盖官方提供的SASS变量就能实现需求，完全符合官方推荐的自定义方式，不需要额外写CSS。具体步骤如下：

1. 打开项目中的app/assets/stylesheets/application.bootstrap.scss文件
2. 在导入Bootstrap核心样式的代码之前，添加容器最大宽度的变量覆盖代码：

// 覆盖所有断点的容器最大宽度为960px
$container-max-widths: (
  xs: 960px,
  sm: 960px,
  md: 960px,
  lg: 960px,
  xl: 960px,
  xxl: 960px
);

// 导入Bootstrap核心样式（确保变量代码在这行之前）
@import "bootstrap";

说明 #

Bootstrap 5中$container-max-widths是控制容器响应式宽度的核心SASS映射变量，默认会为不同屏幕断点设置不同的最大宽度。把所有断点的宽度都设为960px后，无论屏幕尺寸多大，容器的最大宽度都会固定在960px。

如果你的项目用单独的变量文件（比如_bootstrap-variables.scss）管理自定义变量，只需把上面的变量代码放到这个文件里，再确保在导入Bootstrap前先导入这个变量文件即可。

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