MkDocs中Jupyter Notebook代码单元输出横向排列问题求助

方法一：修改mkdocs-jupyter插件配置 #

在你的mkdocs.yml里，给mkdocs-jupyter插件添加layout参数，强制垂直布局：

plugins:
  - search
  - mkdocs-jupyter:
      include_source: True
      layout: vertical  # 新增这行，让输出默认在代码下方

方法二：自定义CSS强制调整布局 #

如果方法一没生效，就用自定义CSS覆盖默认样式：

1. 在项目的docs目录下新建stylesheets/extra.css文件，写入以下代码：

/* 强制代码块和输出垂直排列 */
.jp-Cell {
  flex-direction: column !important;
}
.jp-Cell-outputWrapper {
  width: 100% !important;
}

2. 在mkdocs.yml里引入这个CSS文件：

extra_css:
  - stylesheets/extra.css

完成以上操作后，重新运行mkdocs serve或者mkdocs build，就能看到输出模块自动移到代码单元的下方了。

内容的提问来源于stack exchange，提问作者L Maxime