主页 / coding / 问题 / 79030511
Accepted
Quinten
Asked: 2024-09-27 16:29:49 +0800 CST

更改 Quarto 仪表板中标注块的宽度

  • 772

我想创建一个Quarto 仪表板，其中我的标注块的宽度与页面宽度不同。现在它使用整个页面宽度，这不是我想要的。以下是一些可重现的代码：

---
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% 的宽度。我尝试使用此处描述的一些 CSS ，但它对我来说不起作用。所以我想知道是否有人知道如何更改 Quarto 仪表板中此标注块的宽度？

1 个回答

  1. Best Answer

    您可以使用!important它来确保样式属性覆盖在其他地方设置的任何其他属性：

    一个文件

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

# Test

<style>
.narrow {
    width: 30% !important;
}
</style>

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

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

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

    单独的文件

    如果您喜欢单独的文件。您可以在这里获得dashboard.qmd：

    ---
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 .narrow}
Note that there are five types of callouts, including:
`note`, `warning`, `important`, `tip`, and `caution`.
:::

    然后styles.css：

    .narrow {
    width: 30% !important;
}

    带有窄标注框的页面

    • 1

相关问题