WordPress Astra主题Spectra Tabs块：页面缩窄时标签需保持置顶

针对你用Astra主题+Spectra Tabs块展示棋赛结果的情况，要让标签栏始终保持在顶部，不受页面宽度影响，直接添加自定义CSS就能搞定，步骤如下：

1. 打开WordPress后台，点击「外观」→「自定义」（或者直接编辑目标页面，在编辑器右上角设置里找到「自定义CSS」入口）。
2. 在自定义CSS输入框中粘贴以下代码：

/* 强制Spectra Tabs始终保持顶部布局 */
.uagb-tabs__wrap {
  flex-direction: column !important;
}
.uagb-tabs__nav {
  flex-direction: row !important;
  flex-wrap: wrap; /* 标签过多时自动换行，避免超出屏幕 */
}
/* 覆盖默认的窄屏响应式规则 */
@media (max-width: 768px) {
  .uagb-tabs__wrap {
    flex-direction: column !important;
  }
  .uagb-tabs__nav {
    flex-direction: row !important;
  }
}

3. 点击「发布」保存设置，刷新页面即可看到效果。

补充说明： #

• 代码里的!important是用来强制覆盖Spectra默认的响应式样式，确保你的设置优先生效。
• flex-wrap: wrap能避免标签过多时挤到屏幕外，自动换行展示。
• 如果代码没生效，按F12打开浏览器开发者工具，检查Tabs块的类名是否为.uagb-tabs__wrap，若有差异，替换成实际类名即可。

内容的提问来源于stack exchange，提问作者Michael Jansen