如何固定Bootstrap Container宽度并适配Figma设计？

• 通过Sass变量覆盖Bootstrap断点宽度
  Bootstrap的Container宽度基于断点逻辑，直接全局修改容易打乱响应式规则。如果项目用Sass预编译，可直接覆盖$container-max-widths变量，让每个断点的Container宽度匹配Figma设计：

  // 按Figma设计调整各断点的Container最大宽度
  $container-max-widths: (
    sm: 540px,
    md: 720px,
    lg: 960px,
    xl: 1140px,
    xxl: 1440px // 替换为Figma的大尺寸宽度
  );
  
  // 导入Bootstrap核心样式（确保变量在导入前定义）
  @import "bootstrap";
  

  这种方式能保留Bootstrap原生响应式逻辑，仅调整各断点的宽度阈值。

• 用CSS变量直接覆盖（无需Sass）
  Bootstrap 5支持通过CSS变量调整Container断点宽度，适合不使用预处理器的项目：

  :root {
    --bs-container-max-width-sm: 540px;
    --bs-container-max-width-md: 720px;
    --bs-container-max-width-lg: 960px;
    --bs-container-max-width-xl: 1140px;
    --bs-container-max-width-xxl: 1440px; // 匹配Figma设计的宽度
  }
  

  将这段代码放在Bootstrap样式之后，即可覆盖默认的Container宽度规则。

• 创建自定义Container类（局部生效）
  若不想全局修改Container，只为当前页面适配Figma设计，可自定义容器类，仅作用于目标页面：

  .figma-container {
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: auto;
    margin-left: auto;
  }
  
  // 对应Figma的桌面宽度断点
  @media (min-width: 1200px) {
    .figma-container {
      max-width: 1440px;
    }
  }
  
  // 平板断点按Figma设计调整
  @media (min-width: 992px) {
    .figma-container {
      max-width: 960px;
    }
  }
  
  // 移动端断点同理调整
  @media (min-width: 576px) {
    .figma-container {
      max-width: 540px;
    }
  }
  

  之后在页面中用<div class="figma-container">替代默认的container类，不会影响其他页面的响应式布局。

• 先对齐Figma的响应式断点
  先确认Figma设计稿中是否包含不同屏幕尺寸的适配规范（如桌面、平板、移动端的宽度），再对应Bootstrap的断点（sm:576px、md:768px、lg:992px、xl:1200px、xxl:1400px）调整，确保每个断点的Container宽度都与设计一致，而非仅修改最大宽度，避免响应式错乱。

• 避免直接修改Bootstrap原始CSS
  直接编辑Bootstrap核心CSS文件会导致后续框架升级时丢失自定义修改，所有调整都应通过自定义样式、Sass变量或CSS变量实现，保持代码可维护性。

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