如何在Quarto网站中添加HTML代码？代码渲染不全问题排查

你的操作本身没有语法错误，渲染仅部分生效的核心原因是Quarto的Simplex主题默认未加载卡片依赖的Bootstrap类样式——你用的card、border-primary等都是Bootstrap组件类，主题没引入对应CSS就会导致类样式失效，仅内联样式（比如max-width:20rem）能生效。

解决步骤 #

• 启用Quarto内置Bootstrap支持
  在.qmd文档的YAML头部添加配置，让Quarto自动加载Bootstrap：

  format:
    html:
      theme: simplex
      bootstrap: true
  

  重新渲染后，Bootstrap的卡片类样式会正常生效。

• 内嵌核心卡片样式（备用方案）
  如果上述方法无效，可直接在文档头部内嵌Bootstrap卡片的核心CSS，确保样式不依赖外部加载：

  <style>
  .card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
  }
  .card-header {
    padding: 0.5rem 1rem;
    margin-bottom: 0;
    background-color: rgba(0,0,0,.03);
    border-bottom: 1px solid rgba(0,0,0,.125);
  }
  .card-body {
    flex: 1 1 auto;
    padding: 1rem 1rem;
  }
  .card-title {
    margin-bottom: 0.5rem;
  }
  .border-primary {
    border-color: #0d6efd !important;
  }
  .border-secondary {
    border-color: #6c757d !important;
  }
  .mb-3 {
    margin-bottom: 1rem !important;
  }
  </style>
  

• 检查HTML代码格式
  确保复制到.qmd里的HTML代码没有被包裹在代码块（```）或<pre><code>标签中，直接放在文档正文区域即可。

验证方式 #

修改配置后重新渲染文档，查看卡片的边框、背景、间距等样式是否正常显示。若仍有问题，可通过浏览器开发者工具（F12）检查元素的CSS加载状态，确认是否存在样式覆盖情况。

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