通常，主题内容看起来像这样。没有我想要的那么大。
因此，我编写了这段代码来增加宽度：
.topic-body {
width: 830px;
}
使其看起来像这样：
但当我的屏幕较小时，它看起来像这样：
如何避免这种情况？
The position of the timeline is based on the default topic width, so that needs to be moved too… our default CSS is:
.timeline-container {
margin-left: 757px;
@media all and (min-width: 1140px) {
margin-left: 820px;
}
@media all and (min-width: 1250px) {
margin-left: 900px;
}
}
So I think you’d either want to reduce the topic width for smaller screens, or increase the margin-left of the timeline-container a bit.
Another difficulty you might run into is when we switch from the timeline to the progress bar at smaller browser widths… because that switch is determined in JS so it’s more involved than just updating the CSS.
I think eventually we’d want the layout to be more flexible so it would be in the right position automatically if the topic column width is different, but for now it’s a manual adjustment at a few breakpoints.
10 个赞
你好，偶然发现这个，因为这是用户提出的请求。
直接在 topic.body 规则上使用同类规则不行吗？
与其这样：
.topic-body {
width: 830px;
}
是否可以像这样，例如：
.topic-body {
width: 727px;
@media all and (min-width: 1140px) {
width: 790px;
}
@media all and (min-width: 1250px) {
width: 870px;
}
}
这样主题宽度就能始终与时间线边距宽度保持一致。
我在主题中使用了更宽的屏幕。它混杂在其他一堆内容中，但我认为我已经将所有仅针对主题帖子页面的宽屏相关代码提取到了这个组件中，修改它以获得你需要的最大宽度应该很容易。
如果你希望页眉宽度保持一致，不要在主题帖子页面变宽，请删除第 20 行中的
, .archetype-regular .d-header .wrap
它使用了 90px 的头像，如果你想要 45px，只需删除 head_tag.html 以及 CSS 末尾的这些行：
.topic-avatar {
width: 90px;
.avatar {
width: 90px;
height: 90px;
}
}
.embedded-posts .topic-avatar {
width: 45px;
img.avatar {
width: 45px;
height: 45px;
}
}
我制作了一个非常简单的主題组件，仅在大屏（桌面端）上加宽主题内容。它是为我个人的笔记/博客 Discourse 站点 bawmedical.co.uk 设计的，功能并不复杂，目前也未使用 @media 查询。不过它可能适用于一些简单的场景。如果有人使用它并有反馈，我们可以在 Meta 上创建新主题进行讨论，或者在 GitHub 上提交 Issue 或 Pull Request。
（这对我自己来说也是一个备忘录，因为过一段时间我可能会忘记是怎么实现的，到时候又要来 Meta 上查找了！）
5 个赞
太棒了，谢谢！
好消息，现在就是这样。在主题中，帖子的内容宽度可以通过一点 CSS 来增加：
:root {
--topic-body-width: 1000px;
}
就是这样！没有重叠。请注意，最大宽度仍然受到 Discourse 整体最大宽度的限制，因此如果您想做一些极端的事情，例如：
:root {
--topic-body-width: 2000px;
}
您还需要增加 --d-max-width，它默认为 1110px
:root {
--d-max-width: 3000px;
--topic-body-width: 2000px;
}
6 个赞
谢谢 @awesomerobot，我会相应地更新主题组件
1 个赞
我已经更新了 TC 并添加了一个参数以允许在自定义 UI 中控制主题宽度。它正在工作，因为 CSS 参数正在被更改，您可以在检查页面源代码时看到这一点。但是，主题正文的实际宽度似乎没有改变。
2 个赞
您好，很高兴看到这些关于更宽主题的最新进展，我的用户和我都会感谢您！
看起来 pacharanero 的主题组件可能比 @Alex_P 的版本 这里 更简洁、更现代？（类似主题：https://meta.discourse.org/t/increasing-post-width-with-css/43368）我确实很喜欢 @Alex_P 将帖子编辑器宽度增加到全屏的选项。
我也想让主页的 最新 / 新建 / 分类 列表变得更宽一些。要做到这一点，似乎应该减小最左边和最右边的边距，如果可能的话，为了保持一致性，应该与主题视图中的宽度相同。
感谢 @rahim123，我很高兴能与 @Alex_P 合作，为两者带来相同的功能，或者如果有人想将这两个 TC 重构为一个统一的 TC，并添加“编辑器宽度”选项。或者也可以在我自己的仓库中提交一个 PR。这是一个非常简单的插件，所以并不难弄清楚，只是我现在太忙了，暂时无法完成，但也许在接下来的几周里会有机会。
1 个赞
我尝试了这一点，先是 topic body，然后添加了 --d-max-width，这导致 body 重新对齐到屏幕右侧——出乎意料！？
因此，即使宽度设置为 1400px，你的意思是如果没有上面的 --d-max-width，它也不会超出 1110px 的默认值——是这样吗？
我将其更改为：
:root {
--topic-body-width: 100w;
--d-max-width:100w;
}
其中 100w 是窗口的宽度
此主题已在 2290 天后自动关闭。不再允许回复。