You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何调整mdbook内容区域宽度,解决边距过大导致内容压缩问题?

配置mdbook优化内容区域占比的方法

方法1:自定义CSS覆盖默认样式

mdbook的默认边距由主题CSS控制,你可以通过自定义CSS调整内容区域宽度:

  • 在项目根目录创建theme文件夹(无则新建)
  • 在theme内新建style.css,添加以下代码:
/* 调整主内容容器的最大宽度与边距 */
.book .book-body .page-wrapper .page-inner {
  max-width: 95%; /* 可改为具体像素值如1200px,按需调整 */
  margin: 0 auto;
}

/* 单独优化表格显示,避免压缩 */
.book .book-body .page-inner table {
  width: 100%;
  table-layout: auto;
}
  • 在book.toml中启用自定义CSS:
[output.html]
additional-css = ["theme/style.css"]

方法2:修改内置主题配置(部分主题支持)

若使用默认主题或支持配置的第三方主题,可直接在book.toml中调整:

[output.html]
# 设置内容区域最大宽度,支持百分比或像素值
max-content-width = "95%"

注:该配置并非所有主题都兼容,不生效时优先用自定义CSS方案。

方法3:更换宽内容区域的第三方主题

部分社区主题本身设计了更宽的内容区域,可直接替换主题,例如在book.toml中配置:

[output.html]
theme = "mdbook-admonish"

需提前安装对应主题依赖。

内容的提问来源于stack exchange,提问作者Sandman

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.20 17:19:03