如何修改react-bootstrap中container的默认宽度为更小值？

下面提供几种实用方案，能让容器在所有视口下都比默认宽度更窄：

方法1：CSS自定义变量覆盖（Bootstrap 5+推荐） #

Bootstrap 5及以上版本用CSS变量定义了容器的最大宽度，你可以直接覆盖这些变量，或者针对每个断点设置更窄的固定值：

/* 先清除默认的最大宽度限制，再逐个断点设置更小值 */
.container {
  --bs-container-max-width: none;
}

/* 超小屏（≥576px） */
@media (min-width: 576px) {
  .container {
    max-width: 500px; /* 默认是540px，缩小40px */
  }
}

/* 小屏（≥768px） */
@media (min-width: 768px) {
  .container {
    max-width: 700px; /* 默认是720px，缩小20px */
  }
}

/* 中屏（≥992px） */
@media (min-width: 992px) {
  .container {
    max-width: 900px; /* 默认是960px，缩小60px */
  }
}

/* 大屏（≥1200px） */
@media (min-width: 1200px) {
  .container {
    max-width: 1100px; /* 默认是1140px，缩小40px */
  }
}

/* 超大屏（≥1400px） */
@media (min-width: 1400px) {
  .container {
    max-width: 1300px; /* 默认是1320px，缩小20px */
  }
}

你可以根据需求调整每个断点的具体数值，确保在所有设备上都符合预期的窄宽度。

方法2：Sass变量重写（适合源码编译场景） #

如果你的项目是基于Bootstrap的Sass源码构建的，直接修改容器的断点变量是最“原生”的方式：

// 先引入Bootstrap的变量文件
@import "../node_modules/bootstrap/scss/variables";

// 覆盖各断点下的容器最大宽度
$container-max-widths: (
  sm: 500px,
  md: 700px,
  lg: 900px,
  xl: 1100px,
  xxl: 1300px
);

// 再引入Bootstrap主文件编译
@import "../node_modules/bootstrap/scss/bootstrap";

这种方式编译后生成的CSS会直接包含你的自定义宽度，不需要额外写覆盖样式。

方法3：全局比例缩小（快速简洁方案） #

如果不想逐个断点调整，也可以直接用百分比让容器整体按比例缩小：

.container {
  width: 90%;
  max-width: 90%;
}

如果默认样式优先级更高，加上!important强制覆盖即可：

.container {
  width: 90% !important;
  max-width: 90% !important;
}

注意：这种方式会让容器在所有视口下都保持默认宽度的90%，适合需要统一比例缩小的场景。

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