如何制作 Sphinx 的 ReadTheDocs 主题，以便在移动设备上很好地布局函数参数？

Question

Sphinx 的

ReadTheDocs 主题 是一个特别漂亮且易于阅读的主题。它在宽度合适的显示器上工作得很好。这是一个例子：

它在非常窄的显示屏上也能很好地工作（就像你在移动设备上看到的那样）。然而，至少有一件事做得很糟糕：函数签名部分的文档溢出了右侧。这是因为正在记录的事物类型（“参数：”/“引发：”/“返回：”）在左侧形成一种列，占用了大量的水平空间。这是同样的示例，显示了这个问题：

我更喜欢这些标题在自己的行上，就像下面的版本一样（我用 RST 语法手动构建了它），尽管理想情况下我希望垂直间距较小。有时这仍然会溢出（类型名称很长），但已经好多了。如果无条件地像这样，即使是宽显示屏，我什至会很高兴。

有没有办法让主题表现得像上图一样？也许通过覆盖主题 CSS 中的某些内容？

编辑一些额外信息：

aioresult docs是有问题的网站。我发现，如果我用 display: block

覆盖相关

 标签之一的样式（在我的浏览器的样式检查器中），那么它会修复它，但似乎有几十个显示选项，我不知道是什么不同的是 - 我对 CSS 不太熟悉。另外，缩进看起来太小（不像上面的最终图像）。我也不知道如何将自定义 CSS 仅定位于这种类型的定义列表 - 似乎 

用于页面上的许多其他内容（例如类名和下面的所有内容）。

这是我为了达到效果而创建的一些自定义 CSS。我使用 ReadTheDocs 指南将其包含在我的文档中

如何添加自定义 CSS。

@media screen and (max-width:1024px) {
  html.writer-html5 .rst-content dl.field-list { display: block }
}
html.writer-html5 .rst-content dl.field-list > dt { padding-left: 0px }
html.writer-html5 .rst-content { overflow-wrap: break-word }
html.writer-html5 .rst-content dt.sig { display: block !important }

说明：

关键是使用
• display: block

   代替 

  dl.field-list

  。我使用了所有这些限定，因为否则它会被样式本身中更具体的 CSS 覆盖。

我最初以
• @media screen and (max-width:768px)

  为条件，因为RTD主题用它来决定何时隐藏侧边栏，但我发现它在中等宽度的窗口中仍然溢出，所以我将阈值更改为

  1024px

   。有些人可能更愿意完全摆脱条件。

然后我发现从
• <dt>

  （如“返回：”）到

  <dt>

  （如“返回值是...”）的缩进非常窄。那是因为 

  <dt>

   不知何故得到了 

  1em

   的缩进，这几乎不小于 

  <dd>

   的缩进。将其设置为 0 解决了这个问题（这对我来说是可以接受的，但有些人可能更喜欢在 

  <dt>

   上添加缩进。我将其排除在 

  max-width

   条件之外，因为我什至更喜欢网格版本不缩进（这个主题已经有足够的缩进了）。

我添加了
• overflow-wrap: break-word

   来解决标识符名称很长的问题。

最后一行使签名（蓝色和灰色框）始终跨越整个屏幕宽度，而不是仅当它们占用多行时才如此。与其他的不同，它不是溢出，而且绝对更主观。我将其包含在此处是因为它仍然与窄显示屏有关：默认行为在移动屏幕上看起来特别差，其中许多签名往往几乎到达右手边缘，但又不完全到达，因此看起来右侧边距不均匀。

结果如下：

Answer 1

这是我为了达到效果而创建的一些自定义 CSS。我使用 ReadTheDocs 指南将其包含在我的文档中

如何添加自定义 CSS。

@media screen and (max-width:1024px) {
  html.writer-html5 .rst-content dl.field-list { display: block }
}
html.writer-html5 .rst-content dl.field-list > dt { padding-left: 0px }
html.writer-html5 .rst-content { overflow-wrap: break-word }
html.writer-html5 .rst-content dt.sig { display: block !important }

说明：

关键是使用
• display: block

   代替 

  dl.field-list

  。我使用了所有这些限定，因为否则它会被样式本身中更具体的 CSS 覆盖。

我最初以
• @media screen and (max-width:768px)

  为条件，因为RTD主题用它来决定何时隐藏侧边栏，但我发现它在中等宽度的窗口中仍然溢出，所以我将阈值更改为

  1024px

   。有些人可能更愿意完全摆脱条件。

然后我发现从
• <dt>

  （如“返回：”）到

  <dt>

  （如“返回值是...”）的缩进非常窄。那是因为 

  <dt>

   不知何故得到了 

  1em

   的缩进，这几乎不小于 

  <dd>

   的缩进。将其设置为 0 解决了这个问题（这对我来说是可以接受的，但有些人可能更喜欢在 

  <dt>

   上添加缩进。我将其排除在 

  max-width

   条件之外，因为我什至更喜欢网格版本不缩进（这个主题已经有足够的缩进了）。

我添加了
• overflow-wrap: break-word

   来解决标识符名称很长的问题。

最后一行使签名（蓝色和灰色框）始终跨越整个屏幕宽度，而不是仅当它们占用多行时才如此。与其他的不同，它不是溢出，而且绝对更主观。我将其包含在此处是因为它仍然与窄显示屏有关：默认行为在移动屏幕上看起来特别差，其中许多签名往往几乎到达右手边缘，但又不完全到达，因此看起来右侧边距不均匀。

结果如下：