有关于将 Horizon 设置为全宽的考虑吗？我觉得它在中间（紧身胸衣？）感觉有点受限制，完全展开会很好地放松它。
4 个赞
不，不打算这样做。我们保持有限的宽度，这对应于最佳阅读长度。
2 个赞
我刚刚测试了（尽管是在移动设备上），对我来说运行正常。控制台里有什么吗？或者您可以尝试使用不同的浏览器检查一下？
1 个赞
感谢 @chapoi！我的控制台：
1 个赞
好的，我确实可以重现这个问题。我认为这是因为 Horizon 可能已经被移到了核心（core）。需要弄清楚如何修复预览链接，如果可能的话。（在 Meta 上预览会最简单——已更新主题）
话虽如此，您可以通过切换主题直接在 Meta 上预览它。
2 个赞
非常感谢，现在可以正常工作了！
1 个赞
2 个帖子被拆分到新主题：Horizon 主题上的不可见按钮文本
移动广告容器溢出到自家广告中 - RTL/LTR 布局不匹配
您好
我正在使用 Horizon 主题和官方的 House Ads 插件，并且我创建了一个自定义组件来使用与 Discourse 设计系统兼容的 CSS 变量和布局规则来设置广告样式。
问题：广告容器在移动设备上溢出视口（LTR 和 RTL 均如此）
- 主题: Horizon（在默认主题或其他主题如 Material 等中不可重现）
- 插件: House Ads + 自定义组件
- 设备: 移动设备
- 行为:
- 当 网站语言 = 英语 (LTR) 时 →
.ad-container的左边缘被裁剪（向左溢出）。 - 当 网站语言 = 波斯语/阿拉伯语 (RTL) 时 → 右边缘被裁剪（向右溢出）。
- 当 网站语言 = 英语 (LTR) 时 →
- 预期: 广告卡应完全包含在视口内，居中或与帖子内容宽度对齐。
我的 CSS 代码：
摘要
:root {
/* 核心颜色 */
--ad-bg: var(--secondary);
--ad-border: var(--highlight);
--ad-text: var(--primary);
/* 标签 */
--ad-label-bg: var(--highlight);
--ad-label-text: var(--danger);
}
.house-creative {
margin-left: 0 !important;
}
.house-creative a.between-posts-ad {
display: block;
text-decoration: none;
color: inherit;
background-color: transparent;
font-family: inherit;
}
/* ===============================
卡片容器
=============================== */
.house-creative .ad-container {
direction: rtl !important;
text-align: center !important;
margin-bottom: 20px;
padding: 10px 5px;
max-width: calc(#{$topic-avatar-width} + #{$topic-body-width} + (#{$topic-body-width-padding} * 2)); background-color: var(--ad-bg);
border: 2px solid var(--ad-border);
border-radius: 10px;
box-sizing: border-box;
line-height: 1.7;
color: var(--ad-text);
transition:
background-color 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease,
transform 0.2s ease;
}
.house-creative a.between-posts-ad:hover .ad-container {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.house-creative .ad-label {
display: inline-block;
text-align: center;
margin-bottom: 6px;
padding: 4px 12px;
font-size: 0.85em;
font-weight: 700;
text-transform: uppercase;
background-color: var(--ad-label-bg);
color: var(--ad-label-text);
border-radius: 999px;
}
.house-creative .ad-container .ad-text {
margin: 0;
font-size: 1rem;
line-height: 1.9;
color: var(--ad-text);
direction: rtl ;
text-align: center !important ;
unicode-bidi: isolate;
}
@media (max-width: 480px) {
.house-creative .ad-container {
direction: rtl !important;
text-align: center !important;
padding: 16px 12px;
width: 100%;
max-width: 100%;
}
}
Horizon 尚未与所有组件和插件兼容。
2 个赞
可以在这里阅读相关信息
6 个赞
9 个帖子被拆分到新主题：用户名中 @ 放置的 RTL 问题
2 个帖子被拆分到新主题：Horizon 上的紧凑/展开视图不起作用
2 个帖子被拆分到新主题：Horizon interaction with Brand Header
一篇帖子被拆分到新主题：Flair issues on Horizon
一篇帖子被拆分到新主题：两级子类别显示问题
我不确定这是否与 Horizon 或 Header Categories Navbar 组件有关。有人向我指出，Horizon 上的菜单栏从最左侧开始，与其他主题（以 Foundation 为例）不同，这在宽屏显示器上看起来很奇怪。
Horizon：
Foundation：
这是预期的行为吗？还是可能需要修复的问题？我必须说，如果内容宽度受到限制，那么菜单栏不应该从最左边开始，这对我来说是合乎逻辑的。