只设width:100%会导致图片强制拉伸失真或撑破视口引发横向滚动；必须配合max-width:100%和height:auto才能自适应且保持清晰比例。

fr单位与固定值（如px、%、rem）可在grid-template-columns中自由混用，固定值先占位，剩余空间按fr比例分配；minmax()可为固定列添加弹性边界，auto-fit配合minmax()能自动适配列数。

设置box-sizing:border-box能解决宽度溢出问题，因其将padding和border计入width/height内，使width:100%真实占满父容器，避免content-box下因额外尺寸导致的撑破、换行或滚动条。

Bootstrap响应式依赖媒体查询与断点类名，如col-md-6在≥768px时占半宽，小屏回退100%；container自动适配宽度，row用负margin抵消col内边距，col用flex实现等高换行。

图片在移动端撑破布局的解决方法是设置max-width:100%和height:auto，确保图片随容器缩放且保持宽高比；避免使用width:100%或height:100%导致变形或模糊。

width:100%撑破父容器是因为默认box-sizing:content-box，使padding和border额外增加宽度；修复方法是设置box-sizing:border-box，推荐全局重置,::before,*::after{box-sizing:border-box;}。