如何调整Quarto Dashboard中callout-block的宽度？

问题描述 #

我想要创建一个Quarto Dashboard，其中的提示框（callout-block）宽度与页面宽度不同。目前它默认占满整个页面宽度，不符合需求。可复现代码如下：

---
title: "Test"
format: dashboard
---

# Test

<h1>This is an example!</h1> 

I'm trying to change the width of my callout-block below!

::: {.callout-note}
Note that there are five types of callouts, including:
`note`, `warning`, `important`, `tip`, and `caution`.
:::

当前提示框占满仪表盘全部宽度，我希望将其宽度设置为30%左右。尝试过参考ObsidianMD的CSS自定义方法，但未生效，请问如何在Quarto Dashboard中调整提示框宽度？

解决方案 #

方法1：内联包裹容器 #

直接在提示框外层嵌套带宽度样式的<div>，快速实现单个提示框的宽度调整：

---
title: "Test"
format: dashboard
---

# Test

<h1>This is an example!</h1> 

I'm trying to change the width of my callout-block below!

<div style="width: 30%;">
::: {.callout-note}
Note that there are five types of callouts, including:
`note`, `warning`, `important`, `tip`, and `caution`.
:::
</div>

方法2：全局自定义CSS #

如果需要统一调整所有提示框或特定类型的提示框，可在文档中嵌入自定义CSS规则：

---
title: "Test"
format: dashboard
---

<style>
/* 调整所有类型的提示框宽度 */
.callout {
  width: 30% !important;
}

/* 仅调整note类型的提示框宽度 */
.callout-note {
  width: 30% !important;
}
</style>

# Test

<h1>This is an example!</h1> 

I'm trying to change the width of my callout-block below!

::: {.callout-note}
Note that there are five types of callouts, including:
`note`, `warning`, `important`, `tip`, and `caution`.
:::

方法3：外部CSS文件（多文档复用） #

创建styles.css文件，写入以下内容：

.callout {
  width: 30% !important;
}

然后在Quarto文档的YAML头部引用该文件：

---
title: "Test"
format: 
  dashboard:
    css: styles.css
---

# Test

<h1>This is an example!</h1> 

I'm trying to change the width of my callout-block below!

::: {.callout-note}
Note that there are five types of callouts, including:
`note`, `warning`, `important`, `tip`, and `caution`.
:::

说明 #

Quarto Dashboard基于Bootstrap框架，提示框默认采用全宽样式，需通过!important强制覆盖默认规则，确保自定义宽度生效。

内容的提问来源于Stack Exchange，提问作者Quinten