<p>Bootstrap 5 默认不支持 4K 屏（≥1920px）精细响应，因 $grid-breakpoints 最大仅到 xxl: 1400px，导致 .col-xl-* 在 3840×2160 下失效；须通过 Sass 扩展 xxxl 断点并重定义 $container-max-widths，或在纯 CSS 环境中手动添加媒体查询补位。</p>
Bootstrap 5 默认不支持 4K 屏（≥1920px）的精细响应控制，.col-xl-* 在 3840×2160 下基本失效——这不是 bug，是断点设计没覆盖到这个层级。必须手动扩展断点或用媒体查询补位，否则列宽僵硬、文字糊、留白失控。
为什么 .col-xl-* 在 4K 屏下“没反应”
Bootstrap 5.3 的 $grid-breakpoints 默认最大只到 xxl: 1400px，而 4K 屏宽度远超此值（常见 1920px、2560px、3840px）。浏览器查不到匹配断点，就退回到上一个生效的（通常是 xl 或 lg），导致：
• .col-xl-4 还按 1200px 断点计算宽度
• 字号、内边距、图表容器高度全没放大
• .container 仍卡在 1140px / 1320px，左右大片空白
- 别指望 CDN 引入的已编译 CSS 能自动适配 4K；它不含
xxxl或自定义断点 -
container-fluid不等于“撑满 4K”，它只是移除max-width，但 body/html 缺少height: 100vh时，子元素h-100会失效 - 直接写
col-xxl-3没用——若未在 Sass 中声明xxl断点，该类根本不会生成 CSS 规则
用 Sass 扩展 xxxl 断点（推荐给构建项目）
这是最干净、可维护的方式，适用于 Webpack/Vite + Sass 项目。改的是源变量，不是 hack 媒体查询。
- 在自定义
_variables.scss中重定义：$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px, xxxl: 1920px);<br>$container-max-widths: (sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1320px, xxxl: 1800px);
- 同步启用新容器类：
.container-xxxl（需确保你 import 了bootstrap/scss/containers） - 之后就能写：
<div class="col-xxxl-3">、<div class="container-xxxl"> - 注意：修改后必须重新编译 Sass，纯 CSS 引入无效
纯 CSS 环境下用媒体查询兜底
没有构建流程？用 CDN？那就得手写媒体查询，且要避开常见陷阱。
立即学习“前端免费学习笔记（深入）”；
- 不要用
!important覆盖 Bootstrap 原生规则，优先提升选择器特异性：.screen-4k .col-xl-4比单纯.col-xl-4更可靠 - 复制并扩展栅格规则，例如：
@media (min-width: 1920px) {<br> .col-xxxl-3 { flex: 0 0 25%; max-width: 25%; }<br> .col-xxxl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }<br>} - 字体和间距也得同步响应：
@media (min-width: 1920px) { .fs-6 { font-size: 1.5rem; } .p-3 { padding: 1.5rem; } } - 慎用
.d-none .d-xxxl-block：若未声明xxxl断点，.d-xxxl-block完全被浏览器忽略
图表容器和卡片在 4K 下容易错位的根源
不是 Bootstrap 栅格坏了，是 Flexbox 默认行为 + 尺寸测量时机冲突了。
-
.row默认align-items: stretch，强制所有.col拉伸到等高——但 ECharts 初始化时 DOM 尺寸可能还没稳定，canvas 被压扁 - 解决：
• 给图表容器加min-height: 300px（别依赖内容撑开）
• 改.row为.row.align-items-start
• 图表实例创建前，确保父容器已挂载且offsetWidth > 0，必要时setTimeout(() => chart.resize(), 100) - 卡片边框想“大屏显示、小屏隐藏”？
border-0 border-lg只能实现“lg+ 显示”，无法反向控制。真要精确到 ≥1920px，必须写：@media (min-width: 1920px) { .card-border-4k { border: 2px solid #0d6efd; } }
真正难的不是加几行 col-xxxl-2，而是意识到：4K 不是“更大的桌面屏”，它有独立的视觉密度、可读性阈值和交互距离。断点扩到 1920px 只是起点，字号、行高、按钮尺寸、图表渲染时机，每个环节都得单独校准。
