CSS框架Skeleton应用_极其简单的轻量级栅格化框架-css教程-PHP中文网

Skeleton 的 .container 在移动端不居中是因为未设 max-width 断点且 box-sizing 未全局重置；需追加 * { box-sizing: border-box } 和 .container { margin: 0 auto }。

css框架skeleton应用_极其简单的轻量级栅格化框架

为什么 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 直接写 ，左右 padding 就没地方“扣掉”，视觉上会缩进
典型错误现象：列之间留白变大、最后一列换行、文字贴左顶边


如何让 Skeleton 栅格在 Flexbox 环境下不打架？
直接混用会冲突。Skeleton 的 .row 用 float: left 实现，而现代 CSS 习惯用 display: flex 布局，两者共存时 float 会被忽略，列会垂直堆叠。

											
												
												
													CSS婚礼策划服务机构宣传网站模板
													CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
												
												下载
												
											
										

别在同一个容器上同时加 .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 行的源码，比查文档快。