如何调整Skeleton CSS框架中盒子布局的切换临界点？

Skeleton框架默认在屏幕宽度小于750px（移动端竖屏）时，会把所有列的宽度设为100%，所以会自动垂直堆叠。要让特定场景的三列保持横向，不用去改框架源文件，直接加自定义样式覆盖就行：

• 第一步：给需要保持横向的列容器（包裹三列的父元素）加一个自定义类，比如force-inline-columns，避免影响页面其他正常布局。
• 第二步：在你的自定义CSS文件里添加以下代码（确保这段代码在Skeleton的CSS之后加载，才能覆盖默认样式）：

/* 覆盖Skeleton移动端的列堆叠规则 */
@media (max-width: 749px) {
  .force-inline-columns .column,
  .force-inline-columns .columns {
    width: 33.333%; /* 三列均分宽度，也可设为auto让列自适应内容 */
    float: left;
    margin-left: 4%; /* 保留Skeleton默认列间距 */
  }
  /* 清除第一列的左边距，避免整体偏移 */
  .force-inline-columns .columns:first-child {
    margin-left: 0;
  }
}

如果你的列内容极少，也可以把width: 33.333%改成width: auto，让列根据内容自动调整宽度，同时保持横向排列。

另外提醒：不要直接修改Skeleton的源CSS文件，否则后续框架升级时你的修改会丢失，用自定义类的方式更安全可控。

内容的提问来源于stack exchange，提问作者Helen Danger Burns