我的模板Bootstrap v4.1.3相升级到Bootstrap v5.3.3需要注意的有哪些（2布局系统调整）

二、布局系统调整

1. 断点调整
   Bootstrap 5 优化了响应式断点，新增xxl断点，且调整了部分断点的命名逻辑：

   Bootstrap 4 断点	对应 Bootstrap 5 断点	说明（屏幕宽度阈值）
   xs（无前缀）	无前缀（如.col-*）	≥0px（保持不变）
   sm	sm	≥576px（保持不变）
   md	md	≥768px（保持不变）
   lg	lg	≥992px（保持不变）
   xl	xl	≥1200px（保持不变）
   -	xxl	新增，≥1400px

   
   

• 若项目使用xl断点布局（如.col-xl-6），需确认是否需要适配xxl断点（如宽屏显示）。

2. 容器类与宽度

• .container的最大宽度调整（适配xxl断点）：

  断点	Bootstrap 4 宽度	Bootstrap 5 宽度
  xl	1140px	1140px
  xxl	-	1320px

• .container-fluid行为不变（100% 宽度），但内部间距可能因 CSS 变量调整略有变化。

3. Flex 布局工具类

• 新增gap工具类（如.gap-3）用于控制 flex/grid 子元素间距，替代 Bootstrap 4 中手动添加的 margin/padding。

• 弹性盒方向类名调整：.flex-row-reverse不变，但结合 RTL 支持，建议优先使用.flex-start/.flex-end替代方向相关类。