Quarto渲染ipynb导出HTML 页面宽度固定1400px无法修改

Quarto 默认HTML输出基于Bootstrap主题构建，宽度限制并未绑定在<body>标签上：实际控制内容区宽度的是page-columns、quarto-container、.content这几个层级的容器，默认最大宽度值为1400px。
仅修改body选择器的宽度属性存在两个问题：一是没有命中实际控制宽度的DOM节点，二是自定义CSS如果选择器权重低于Quarto内置的合并样式，规则会直接被覆盖。你在开发者工具里没找到限制来源，是因为默认主题的CSS经过压缩合并后内嵌在HTML文件中，仅检查body标签的样式规则无法定位到父容器的宽度设置。

二选一即可，优先推荐第一种原生配置方案：

• 方案1：通过YAML头参数直接配置宽度，无需额外写CSS
  Quarto原生提供了网格宽度配置项，优先级高于内置主题样式，直接在format.html下添加grid配置即可：

  ---
  title: "Quarto Basics"
  format: 
    html:
      code-fold: true
      toc: true
      css: styles.css
      grid:
        body-width: 2000px
        margin-width: 200px # 开启边栏、目录时可按需同步调整边距宽度
  jupyter: R
  ---
  

  配置完成后直接运行原渲染命令quarto render myfile.ipynb即可生效。
• 方案2：补全自定义CSS的选择器，覆盖容器宽度规则
  如果需要保留自定义CSS的写法，需要把实际控制宽度的容器选择器补充进去，同时提高选择器权重确保覆盖默认样式，修改后的styles.css内容如下：

  /* 覆盖所有内容容器的宽度限制 */
  body .page-columns,
  body .quarto-container,
  body .content {
    max-width: 2000px !important;
    width: 2000px;
  }
  
  body            
  {
     margin:5em;
     padding:10px; 
     background-color:#ebebeb;
     font-size:22px; 
     font-family:Verdana;
  }
  

渲染完成后打开HTML文件，按F12唤起开发者工具，选中正文区域最外层父容器，在「计算样式（Computed）」面板中查看max-width属性值，若显示为2000px即配置生效，此时将浏览器窗口拉宽到2000px以上，内容区就会按设置的宽度展示。

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