关键在于用.container控制最大宽度、.row内并列col-md-6实现大屏两栏等宽、col-sm-12确保小屏铺满，并配合justify-content-md-center或mx-md-auto实现大屏居中；避免嵌套container、硬编码width及忽略img-fluid等响应式细节。
大屏居中、小屏铺满的两栏布局关键在哪
核心是利用 Bootstrap 的栅格系统 + 自定义断点控制，而不是靠 mx-auto 或 container 硬套。默认 .container 在 lg+ 宽度固定，会导致“居中但宽度不够”；而直接用 .container-fluid 又会让大屏也铺满，失去居中效果。
真正起作用的是：在中屏（md）及以上用 col-md-6 限定单栏宽度，在小屏（sm）强制占满，并配合 mx-auto 仅对中大屏生效。
怎么写 HTML 才不踩栅格嵌套坑
常见错误是把两栏塞进一个 .row 后，又在外层加 .container 导致左右留白过大，或误用 .col-12 导致小屏错行。
- 两栏必须放在同一个
.row内，且总和为 12（如col-md-6 col-sm-12） - 不要给
.row加justify-content-center——这会让两栏整体居中，但每栏仍左对齐，视觉上不对称 - 外层用
.container控制最大宽度，不是.container-fluid - 如果内容需要严格居中对齐（比如文字），需在每栏内加
text-center或单独设text-md-start
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">左栏</div>
<div class="col-md-6 col-sm-12">右栏</div>
</div>
</div>
为什么 col-md-6 在大屏不居中
col-md-6 只表示“从 md 起宽度为 6 列”，它本身不带居中语义。Bootstrap 的栅格是浮动式布局（Flex 时代仍是基于 flex 布局），.row 默认 justify-content: flex-start，所以两栏会紧贴左侧。
让它们居中，有两种可靠方式：
- 给
.row加justify-content-md-center（注意是-md-，避免小屏也被居中挤压） - 不改
.row，而给每个.col加mx-md-auto，但需配合flex-md-grow-0防止被拉伸 - 更稳妥的做法：保留
.row默认行为，用col-md-5 offset-md-1+col-md-5 offset-md-1实现视觉居中（但列宽略窄）
移动端铺满但内容不撑开怎么办
小屏下 col-sm-12 确保占满，但若内部有固定宽元素（如图片、表格、max-width: 300px 的卡片），会导致留白或横向滚动。
- 所有内部块级元素需设
width: 100%或用w-100工具类 - 图片务必加
img-fluid，否则会溢出容器 - 避免在小屏使用
min-width或white-space: nowrap，这两者极易破坏铺满效果 - 调试时用浏览器设备模拟器检查
computed width，确认是否真为 100% viewport width
最常被忽略的是：自定义 CSS 中写了 .col { width: 300px } 这类硬编码，会直接覆盖 Bootstrap 栅格逻辑。
