Skeleton 的 .container 在移动端不居中是因为未设 max-width 断点且 box-sizing 未全局重置；需追加 * { box-sizing: border-box } 和 .container { margin: 0 auto }。
为什么 Skeleton 的 .container 在移动端不居中？
因为默认没加 max-width 媒体查询断点，且 box-sizing 未全局重置。Skeleton 的 CSS 极简，省掉了现代项目里习以为常的响应式兜底逻辑。
- 它只在
@media only screen and (min-width: 550px)才给.container设max-width: 960px，小于这个宽度时宽度是100%但无居中约束 - 如果你页面没手动加
* { box-sizing: border-box }，内边距或边框会让栅格列实际溢出 - 解决办法很简单：在引入 Skeleton CSS 后追加两行
*, *::before, *::after { box-sizing: border-box; }
.container { margin: 0 auto; }
row 和 columns 类名必须成对出现吗？
不是必须，但单独用 .row 或单独用 .six.columns 会立刻破坏布局——前者缺少清除浮动，后者缺少父容器的负外边距修正。
-
.row内部用了margin-left: -0.9375rem; margin-right: -0.9375rem，这是为了抵消子列的padding-left/right: 0.9375rem - 如果跳过
.row直接写<div class="six columns">，左右 padding 就没地方“扣掉”，视觉上会缩进<li>典型错误现象：列之间留白变大、最后一列换行、文字贴左顶边</li> <h3>如何让 Skeleton 栅格在 Flexbox 环境下不打架？</h3> <p>直接混用会冲突。Skeleton 的 <code>.row用float: left实现，而现代 CSS 习惯用display: flex布局，两者共存时 float 会被忽略，列会垂直堆叠。- 别在同一个容器上同时加
.row和display: flex - 如果要用 Flex，就彻底弃用
.row+.columns，改用 Skeleton 提供的.one.column~.twelve.columns仅作宽度控制（它们本质是width: 8.333%这类声明） - 此时需自行补
display: flex和flex-wrap，否则超宽列不会折行
为什么
offset-by-two在小屏下失效？因为 Skeleton 的 offset 类（如
.offset-by-two）没有响应式版本，它只在桌面断点生效，且基于固定列数计算偏移量，不随视口缩放重算。立即学习“前端免费学习笔记（深入）”；
- 它的实现是
margin-left: 16.666%（对应两列），但这个值写死在非媒体查询块里 - 小屏下列宽变了，但 offset 还按 12 列网格算，导致偏移量过大甚至整行错位
- 真要响应式偏移，得自己写媒体查询覆盖，比如：
@media only screen and (max-width: 549px) { .offset-by-two { margin-left: 0; } }
越轻量的框架，越依赖你理解它省掉了什么。Skeleton 没封装响应式 offset、没处理 box-sizing、没做 flex 兼容——这些不是 bug，是取舍。用之前先看它那不到 400 行的源码，比查文档快。
- 别在同一个容器上同时加
