如何调整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
相关产品推荐
相关产品推荐

