Bootstrap 默认非为大屏设计，container限宽、col断点错配、字体不随DPI放大，致文字过小、布局错位；须改用container-fluid、禁用断点、重置根字号clamp，并适配硬件与部署细节。
首页用 Bootstrap 做大屏数据展示看板，不是不能做，但得清楚它不是为这类场景设计的——默认栅格、响应式断点、字体缩放逻辑都会在 1920×1080 或更高分辨率大屏上“反向适配”，导致文字过小、卡片错位、留白失控。
为什么直接套用 container 和 col-md-4 在大屏上会出问题
Bootstrap 的 container 默认最大宽度是 1140px（xl 断点），在 4K 屏上只占不到一半宽度；col-md-4 按 576px 起的断点计算列宽，到了大屏仍按 12 等分，但内容没随屏幕同比放大，视觉上就显得稀疏、空洞、按钮难点击。
- 文字和图标不会自动随屏幕 DPI 或物理尺寸放大，靠
rem或vw手动调才可控 -
row的负 margin 和col的 padding 在高分辨率下像素级误差会被放大，边缘对不齐很常见 - 所有断点（
sm/md/lg）都面向「人眼正常阅读距离」，而大屏常挂墙、远距离观看，需的是「远距可读性」而非「响应式折叠」
必须覆盖的三个 Bootstrap 默认行为
不改这三项，再怎么堆 card 和 chart 都会失焦：
- 把
container换成container-fluid，并加style="padding: 0"—— 否则左右固定边距吃掉大量横向空间 - 禁用默认响应式断点影响：给顶层容器加
class="w-100 h-100"，所有子列用col（无断点后缀）或直接设flex-basis - 重置根字号：
html { font-size: clamp(16px, 4vw, 32px); }，让rem在 1080p 到 4K 间平滑放大，避免硬写font-size: 28px导致小屏溢出
bootstrap@5.3+ 中适合大屏的组件组合方式
别用 card-deck（已废弃）、少用 list-group（垂直间距不可控），优先走语义清晰 + CSS 覆盖路径：
- 仪表盘区域用
div class="d-flex flex-wrap w-100 h-100"替代row，子项用flex: 0 0 calc(33.333% - 1rem)控制三栏，比col-4更稳 - 数值卡片统一用
bg-dark text-white p-4+ 自定义border-radius: 8px，避免card内置的box-shadow在投影光线下发灰 - 图表容器必须设
style="min-height: 300px; height: 30vh;"，ECharts/Chart.js 依赖父容器尺寸，百分比高度需父级有明确height - 时间刷新提示放在右下角，用
position: absolute; bottom: 16px; right: 16px; font-size: 14px; opacity: 0.7;，不参与 Flex 布局流
容易被忽略的硬件与部署细节
开发时在笔记本上看没问题，一上拼接屏或 LED 墙就花屏、撕裂、字体发虚：
- Chrome 默认启用 GPU 加速，但某些工控机显卡驱动旧，需加
body { will-change: transform; }强制图层提升 - 禁止用户缩放：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，否则双击手势会破坏全屏布局 - 字体优先用系统自带无衬线体（
"Segoe UI", "Helvetica Neue", sans-serif），别嵌 Google Fonts——内网环境加载失败直接空白 - 所有
px值检查是否应转为rem或vh，比如边框border: 1px solid #333在 4K 下细得看不见，得写成border: 0.1rem solid #333
真正麻烦的从来不是“怎么排版”，而是“怎么让同一份 HTML 在不同型号大屏、不同显卡驱动、不同 Chrome 版本下看起来一致”——多测几台真实设备，比调一百遍 CSS 更有效。
