Spectre.css 的 .container 在移动端不居中是因为默认固定宽度960px且未设 margin: 0 auto，需手动添加 .container 类并配合断点类或使用 .container-xl 实现响应式居中。
为什么 Spectre.css 的 .container 在移动端不居中？
因为默认的 .container 是固定宽度（960px），且没有设置 margin: 0 auto，在小屏上直接溢出左边界。Spectre.css 的响应式逻辑依赖父容器和断点类配合，不是所有类都自带居中行为。
- 必须手动加
class="container"到最外层内容区，不能只靠.columns或.card - 移动端要居中，得配合
.container-xl（1140px）或自定义宽度 +margin: 0 auto - 如果用了
.hero或.section，它们本身不带居中，需额外包裹.container - 注意：Spectre.css 的断点是
sm（576px）、md（768px）、lg（992px）、xl（1200px），没写断点前缀的类（如.col-6）只在lg+生效
form-control 和 input[type="text"] 样式冲突怎么办？
Spectre.css 对 input、select、textarea 默认加了 box-sizing: border-box 和统一 padding，但如果你自己写了重置 CSS（比如全局 * { box-sizing: border-box }），反而会叠加内边距或破坏高度计算。
- 检查是否重复引入了 Normalize.css 或其他重置库，Spectre.css 已内置基础重置
- 避免给
.form-control再套class="form-input"—— 它们是同一套样式，重复加会导致font-size或line-height错乱 - 自定义尺寸时，优先用
.form-control-lg/.form-control-sm，别直接改height或padding - 下拉框
select.form-control在 Safari 上可能文字偏上，加vertical-align: middle可临时修复
用 .btn 时点击无反馈，连 :active 都不触发？
这是 Spectre.css 的伪类样式被覆盖或浏览器禁用了用户代理样式表中的焦点行为。它本身没加 outline 移除，但某些环境（比如 Electron 或旧版 iOS WebView）会忽略 :active 状态。
- 确保没全局设置
*:active { opacity: 1 }或touch-action: manipulation覆盖了默认行为 - 按钮必须是
<button type="button"></button>，用<a class="btn"></a>时需手动加tabindex="0"才能触发声效和键盘交互 - 深色模式下
.btn-primary的:active背景色对比度低，建议补一句.btn:active { transform: translateY(1px) }增强反馈感 - 不要在
.btn上加display: inline-flex—— Spectre.css 用的是inline-block，改了会破坏垂直对齐
如何让 .table 在小屏上横向滚动而不撑破容器？
直接加 .table 类不会自动加滚动，必须用 .table-container 包裹，且这个容器需要明确宽度限制和 overflow-x: auto。
立即学习“前端免费学习笔记（深入）”；
-
.table-container必须是块级元素，不能放在.columns内部再设width: 100%—— Flex 容器会压缩它 - 如果表格列太多，
.table-striped的隔行变色在滚动时可能出现错位，建议搭配border-collapse: collapse和固定th/td宽度 - 移动端滚动体验差？加
touch-action: pan-x到.table-container，防止误触发页面缩放 - 注意：
.table-hover在触摸设备上无效，hover 状态不会被触发
Spectre.css 的轻量优势恰恰藏在它的“不封装”里——它不帮你做媒体查询嵌套、不提供 JS 组件、也不抽象状态类。这意味着你得亲手控制断点组合和 DOM 结构层级，稍一松懈，响应式就断在某个 .col 里。
